@import '../../../scss/index.scss';

@mixin selector-list () {
  @include reset-component();
  @include col-auto();
  background: $list-bg;

  .item {
    @include row-auto();
    position: relative;
    align-items: center;
    height: 34px;
    padding: 0 20px 0 9px;
    cursor: pointer;
    &:not(:first-child) {
      &:before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        border-top: solid 1px $item-border;
      }
    }
  }
  .item--first {
    background: $item-first;
  }
  .item--selected {
    &:after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      background: $item-selected;
    }
  }

  .empty {
    @include row-auto();
    justify-content: center;
    align-items: center;
    height: 34px;
    pointer-events: none;
    .text {
      user-select: none;
      color: $empty-color;
    }
  }

  .text {
    @include font-family();
    @include text-line();
    font-size: 13px;
    color: $text-color;
  }
}