@import 'colours'
@import 'variables'

\:host
  display: block
  width: 100%

.selectbox-container
  display: flex
  align-items: center
  width: 100%
  max-width: 100%
  height: $input-height
  position: relative
  cursor: pointer
  font-size: 15px
  float: left
  clear: both

  .chevron-icon
    position: absolute
    top: 8px
    right: 15px
    color: $text-primary
    width: 12px
    height: 12px

  .selectbox-value
    width: 100%
    height: $input-height
    font-size: 15px
    border: 1px solid $border-input
    color: $text-button
    display: flex
    align-items: center
    padding: 0 20px 0 10px
    position: relative
    font-weight: $weight-normal
    border-radius: 4px

    i
      position: absolute
      top: 13px
      right: 12px
      color: $text-primary

      &.custom-icon
        top: 10px
        left: 10px

    .text-placeholder
      color: $text-secondary
      opacity: .6
      font-size: 15px

  .selectbox-options-container
    position: absolute
    display: inline-block
    top: 39px
    width: 100%
    min-height: $input-height
    left: 0
    right: 0
    z-index: 9
    border-bottom-left-radius: 4px
    border-bottom-right-radius: 4px

  .selectbox-options
    width: 100%
    background: $background
    border: 1px solid $border-input
    min-height: $input-height

    .selectbox-option
      display: flex
      width: 100%
      height: $input-height
      align-items: center
      padding: 0 10px
      position: relative
      border-bottom-left-radius: $border-radius
      border-bottom-right-radius: $border-radius

      &:last-child
        border-bottom-left-radius: $border-radius
        border-bottom-right-radius: $border-radius

      .check-icon
        position: absolute
        color: var(--green)
        width: 15px
        height: 15px
        top: 12px
        right: 10px

      &:hover, &.is-active
        background: $background-light
        color: $text-primary
