.selector-element
  position: relative
  width: 320px
  height: 38px
  font-size: .92rem

  *
    font-family: system-ui, sans-serif
    box-sizing: border-box

  .selector-selected
    width: 100%
    height: 38px
    cursor: pointer
    background: #fff
    box-shadow: 0 1px 2px rgba(0,0,0,.05)
    padding: 0 28px 0 11px
    border: 1px solid silver
    border-radius: 6px
    transition: .2s ease-in-out

    &.visible
      background: #fbfbfb
      border-radius: 6px 6px 0 0
      transition: none

    &:hover
      background: #fbfbfb
      box-shadow: 0 2px 4px rgba(0,0,0,.1)

    &:after
      content: ''
      position: absolute
      right: 12px
      top: 50%
      transform: translateY(-50%)
      border-top: 6px solid silver
      border-left: 6px solid transparent
      border-right: 6px solid transparent

    p
      display: inline-block
      width: 100%
      height: 100%
      line-height: 36px
      margin: 0
      white-space: nowrap
      text-overflow: ellipsis
      overflow: hidden


  .selector-options
    position: absolute
    top: 100%
    left: 0
    display: none
    width: 100%
    height: auto
    max-height: 210px
    overflow: auto
    z-index: 99
    border: 1px solid silver
    border-top: 0
    border-radius: 0 0 6px 6px
    background: #fff
    box-shadow: 0 2px 4px rgba(0,0,0,.1)

    &.cover
      top: 0
      border-radius: 6px
      border-top: 1px solid silver
      
    &.visible
      display: inline-block

    .selector-filter
      position: sticky
      top: 0
      width: 100%
      height: 32px
      border-bottom: 1px solid silver
      z-index: 2

      input
        width: 100%
        height: 100%
        outline: none
        border: none
        background: #fff url('../img/search.svg') left 11px center no-repeat
        background-size: 18px
        font-size: .8rem
        padding: 0 36px

      .selector-filter-clear
        position: absolute
        right: 9px
        height: 18px
        width: 18px
        top: 50%
        transform: translateY(-50%)
        background: url('../img/clear.svg') center no-repeat
        background-size: 18px
        opacity: .7
        cursor: pointer

        &:hover
          opacity: 1

    .selector-group
      float: left
      width: 100%
      border-bottom: 3px solid silver

      .group-text
        position: sticky
        top: 0
        float: left
        width: 100%
        line-height: 32px
        text-transform: uppercase
        font-size: .75rem
        font-weight: 600
        background: #fbfbfb
        color: #6b6b6b
        padding: 0 11px
        overflow: hidden
        white-space: nowrap
        text-overflow: ellipsis
        z-index: 1

      &[data-disabled]
        opacity: .6
        cursor: not-allowed

        .selector-option
          opacity: .6
          cursor: not-allowed

    .selector-option
      display: none
      width: 100%
      height: 32px
      background: #fff
      border-bottom: 1px solid #ddd
      cursor: pointer
      transition: .2s ease-in-out

      &:hover
        background: #f5f5f5

      &[data-selected]
        background: #f2f2f2
        font-weight: 600

      &.show
        display: inline-block

      .option-text
        display: inline-block
        width: 100%
        line-height: 32px
        font-size: .85rem
        padding: 0 11px

      &:last-of-type
        border-bottom: none

      &[data-disabled]
        opacity: .6
        cursor: not-allowed

  &.relative
    height: auto

    .selector-options
      position: relative
      top: 0

  &[data-type="find"] .group-text, &[data-type="search"] .group-text
    top: 33px !important

  &[data-disabled]
    opacity: .6
    cursor: not-allowed

    &:hover
      box-shadow: inherit

    .selector-selected
      cursor: not-allowed

      &:hover
        background: #fff