/*
 *
 * BUI: FORM ELEMENTS
 *
 */

$elementBoxSize: 14px

%icon-base
  display: inline-block
  position: relative
  top: 1px
  width: 12px
  height: 12px
  border: 1px solid $BuiPassive

%label-base
  cursor: pointer

.bui-form-element
  @extend .clear-after
  min-width: 100px
  white-space: nowrap
  &:hover
    .element-label
      color: $BuiActive
  // General Styling
  .element-toggle,
  .element-checkbox,
  .element-radio
    display: none

  .element-checkbox-icon
    color: $cyan-500
    margin-left: -1px
    position: relative
    top: -1px

  // Checkbox
  &.checkbox-type
    label
      @extend %label-base
      .icon
        @extend %icon-base
        border-radius: 2px
        &:before
          position: absolute
          top: -1px
          left: -2px
          font: normal normal normal 14px/1 FontAwesome
          content: "\f00c"
          color: #00bcd4
          display: none
    .element-checkbox:checked + label
      .icon
        top: 0px
        border: 1px solid transparent
        &:before
          display: inline

  // Radio
  &.radio-type
    label
      @extend %label-base
      .icon
        @extend %icon-base
        border-radius: 50%
    .element-radio:checked + label
      .icon
        border: none
        background-color: $cyan-500

  // Toggle
  &.toggle-type
    label
      @extend %label-base
      @extend .clear-after
      .element-label
        float: left
        padding-left: 0
      .icon
        @extend %icon-base
        float: right
        margin: 1px 0
        position: relative
        width: calc((#{$elementBoxSize} * 2) - 4px)
        border-radius: $elementBoxSize
        background-color: $BuiPassive
        border: none
        @include transition( background-color .25s ease )
        &:after
          display: block
          content: ''
          position: absolute
          left: 2px
          top: 2px
          border-radius: 50%
          width: calc(#{$elementBoxSize} - 6px)
          height: calc(#{$elementBoxSize} - 6px)
          background-color: white
          @include transition( left .25s ease )
    .element-toggle:checked + label
      .icon
        background-color: $cyan-500
        &:after
          left: $elementBoxSize

  // Label
  .element-label
    font-size: 14px
    font-weight: 500
    color: $BuiPassive
    display: inline-block
    padding-left: 10px

  // Checked Element
  &.element-checked
    .element-label
      color: $BuiActive

  // Disabled Element
  &.element-disabled
    cursor: default
    label
      .icon
        border-color: $BuiDisabled
        cursor: default
        &:hover
          border-color: $BuiDisabled
    .element-label
      color: $BuiDisabled
      cursor: default


.bui-form-elements-dropdown-holder
  min-width: 170px
  background-color: white
  box-shadow: 0 2px 8px rgba(black, .2)
  .infinite-holder
    padding: 10px 0
  .bui-form-element
    padding: 8px 40px 8px 15px