@charset 'utf-8'
@import 'colors'

.ui-kit-select-container
  position: relative
  margin: 0 0 10px 0
  
  input
    width: 100%
    height: 40px
    background: $input-background
    border: 1px solid $border-color
    border-radius: 3px
    font-size: 13px
    outline: none
    padding: 5px 10px
    color: $input-color
    text-shadow: 0px 0px 0px transparent
    cursor: pointer
    ::-webkit-input-placeholder
      color: $grey
    :-moz-placeholder
      color: $grey
    ::-moz-placeholder
      color: $grey  
    :-ms-input-placeholde  
      color: $grey
    &.is-active
      border-color: $primary
      background: rgba($primary, 0.15)
      color: $primary
      text-shadow: 0px 0px 0px $primary
      -webkit-text-fill-color: transparent
 
  .ui-kit-select-label
    color: $label-color
    font-size: 14px
    display: block
    width: 100%
    margin: 0 0 5px 0
    visibility: hidden
    &.visible
      visibility: visible

  i
    display: block
    position: absolute
    width: 25px
    height: 25px
    top: 28px
    right: 5px
    z-index: 10 
    font-size: 25px
    &.is-active
      color: $primary

  .ui-kit-select-dropdown
    position: absolute
    width: 100%
    top: 62px
    left: 0
    border: 1px solid $primary
    background: $white
    border-bottom-left-radius: 3px
    border-bottom-right-radius: 3px
    visibility: hidden
    opacity: 0
    z-index: 99
    &.is-active
      visibility: visible
      opacity: 1
    
    .ui-kit-select-item
      width: 100%
      height: 40px
      cursor: pointer
      span
        height: 40px
        width: 100%
        display: block
        color: $primary
        padding: 11px
        font-size: 13px
      &:hover, &.is-active
        span
          color: $white
          background: $primary

  &.danger
    input
      &.is-active
        border-color: $red
        background: rgba($red, 0.15)
        color: $red
        text-shadow: 0px 0px 0px $red
        -webkit-text-fill-color: transparent
    i
      &.is-active
        color: $red
    .ui-kit-select-dropdown
      border: 1px solid $red
      .ui-kit-select-item
        span
          color: $red
        &:hover, &.is-active
          span
            color: $white
            background: $red

  &.success
    input
      &.is-active
        border-color: $green
        background: rgba($green, 0.15)
        color: $green
        text-shadow: 0px 0px 0px $green
        -webkit-text-fill-color: transparent
    i
      &.is-active
        color: $green
    .ui-kit-select-dropdown
      border: 1px solid $green
      .ui-kit-select-item
        span
          color: $green
        &:hover, &.is-active
          span
            color: $white
            background: $green

  &.warning
    input
      &.is-active
        border-color: $yellow
        background: rgba($yellow, 0.15)
        color: $yellow
        text-shadow: 0px 0px 0px $yellow
        -webkit-text-fill-color: transparent
    i
      &.is-active
        color: $yellow
    .ui-kit-select-dropdown
      border: 1px solid $yellow
      .ui-kit-select-item
        span
          color: $yellow
        &:hover, &.is-active
          span
            color: $white
            background: $yellow