/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

// NOTE: You can't use @extend that break component independent and topdoc parsing.

// internal variables
var-button-bar-color = $buttonbar-color
var-button-bar-active-color = $buttonbar-active-text-color
var-button-bar-margin = 0
var-button-bar-border-top = 1px solid var-button-bar-color
var-button-bar-border-bottom = 1px solid var-button-bar-color
var-button-bar-border = 0px solid var-button-bar-color
var-button-bar-active-background-color = mylighten(var-button-bar-color)

/*! topdoc
  name: Button Bar
  class: button-bar
  modifiers:
    :disabled: Disabled state
  markup:
    <div class="button-bar" style="width:280px;margin:0 auto;">
      <div class="button-bar__item">
        <button class="button-bar__button">One</button>
      </div>
      <div class="button-bar__item">
        <button class="button-bar__button">Two</button>
      </div>
      <div class="button-bar__item">
        <button class="button-bar__button">Three</button>
      </div>
    </div>
*/

button-bar()
  reset-font()
  display table
  table-layout fixed
  white-space nowrap
  margin 0
  padding 0

button-bar__item()
  reset-font()
  display table-cell
  width auto
  border-radius 0
  position relative

.button-bar
  button-bar()
  position relative
  margin var-button-bar-margin
  border none

.button-bar__item
  button-bar__item()
  hide-input-parent()
  padding 0
  position relative
  overflow hidden

.button-bar__item > input
  hide-input()

.button-bar__item:first-child > .button-bar__button
  border-left 1px solid var-button-bar-color
  border-right 1px solid var-button-bar-color
  border-top-left-radius var-border-radius
  border-bottom-left-radius var-border-radius

.button-bar__item:last-child > .button-bar__button
  border-right 1px solid var-button-bar-color
  border-top-right-radius var-border-radius
  border-bottom-right-radius var-border-radius

.button-bar__button
  reset-font()
  border-radius inherit
  background-color transparent
  color var-button-bar-color
  border var-button-bar-border
  border-top var-button-bar-border-top
  border-bottom var-button-bar-border-bottom
  border-right 1px solid var-button-bar-color
  font-weight var-font-weight
  padding 0 8px
  height 27px
  line-height 27px
  font-size 13px
  width 100%
  transition background-color 0.2s linear, color 0.2s linear
  box-sizing border-box

.button-bar__button:active,
:active + .button-bar__button
  background-color var-button-bar-active-background-color
  border var-button-bar-border
  border-top var-button-bar-border-top
  border-bottom var-button-bar-border-bottom
  border-right 1px solid var-button-bar-color
  height 27px
  line-height 27px
  font-size 13px
  width 100%
  transition none

.button-bar__item.active > .button-bar__button,
:checked + .button-bar__button
  background-color var-button-bar-color
  color var-button-bar-active-color
  transition none

.button-bar__button:disabled
  disabled()

.button-bar__button:hover
  transition none

.button-bar__button:focus
  outline 0

/*! topdoc
  name: Segment
  use: Button Bar
  modifiers:
    :disabled: Disabled state
  markup:
    <div class="button-bar" style="width:280px;margin:0 auto;">
      <div class="button-bar__item">
        <input type="radio" name="segment-a" checked>
        <button class="button-bar__button">One</button>
      </div>
      <div class="button-bar__item">
        <input type="radio" name="segment-a">
        <button class="button-bar__button">Two</button>
      </div>
      <div class="button-bar__item">
        <input type="radio" name="segment-a">
        <button class="button-bar__button">Three</button>
      </div>
    </div>
*/
