@import "../palette";
@import "../variables";
@import "../mixins/fontSize";

$item-size: 35px;
.selector-panel {
  &--relative {
    .selector-panel__container {
      position: relative;
      top: default;
      left: default;
    }
  }
  &__container {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 450px;
    max-width: 100vw;
    background: $dark-blue-color;
    @include border;
    box-shadow: 0px 4px 40px 0px rgba(0,0,0,0.60);
    outline: none;
    z-index: $scrim-content-z-index;
  }
  &__list {
    list-style: none;
    padding: 0px;
    margin: 0px;
    &--scrollable {
      max-height: rem-calc(420px);
      overflow-y: scroll;
    }
    &__zero-state {
      text-align: center;
      padding: 20px;
    }
    &__message-element {
      text-align: center;
      color: $unselected-text;
      font-size: rem-calc(12px);
      padding: rem-calc(5px) 0;
    }
  }
  &__create {
    color: $positive-color;
    padding: 0 15px;
    display: block;
    line-height: $item-size;
    &__container {
      border-bottom: 1px solid $light-blue-color;
      padding: 10px 0;
    }
    &:hover {
      background: $light-blue-color;
    }
  }
  &__item {
    padding: 0 15px;
    cursor: pointer;
    &--current {
      color: white;
      font-weight: 500;
      cursor: default;
    }
    &__container {
      padding: 10px 0;
      display: flex;
      align-content: center;
      justify-content: center;
      border-top: 1px solid $light-blue-color;
    }
    &--highlighted {
      background: $light-blue-color;
    }
    &:hover {
      color: white;
      background: $light-blue-color;
    }
    img {
      width: $item-size;
      height: $item-size;
      object-fit: cover;
      background: $light-blue-color;
      border-radius: 3px;
    }
    &__initial {
      width: $item-size;
      height: $item-size;
      text-align: center;
      line-height: $item-size;
      background: $brand-color;
      border-radius: $global-border-radius;
      color: $panel-background-color;
      @include font-size(22px);
      font-weight: 500;
    }
    &__name {
      margin-left: 15px;
      line-height: $item-size;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      flex: 1 0 0;
    }
    &:hover {
      .selector-panel__item__options {
        display: inline-block;
      }
    }
    &__options {
      display: none;
      padding: 0.5em;
      line-height: 1em;
      cursor: pointer;
      align-self: center;
      border-radius: 2px;
      color: $brand-color;
      svg {
        stroke: $brand-color;
        vertical-align: middle;
        margin-right: 0.25em;
      }
      &:hover {
        background: $dark-blue-color;
        color: white;
        svg {
          stroke: white;
        }
      }
    }
  }
  &__head {
    display: flex;
  }
  &__search {
    width: 50%;
    position: relative;
    padding: 0 20px 20px 0;
    input[type="search"] {
      padding-left: em-calc(38px);
      @include font-size(13px);
    }
    &:before {
      content: '\E93D';
      font-family: 'nuvi_icons_bold';
      transform: scale(-1, 1);
      position: absolute;
      top: 9px;
      left: 10px;
      pointer-events: none;
      color: lighten($light-blue-color, 15);
      @include font-size(16px);
      line-height: 1;
    }
  }
  &__title {
    flex: 1 0 0;
    @include font-size(18px);
    color: white;
    text-transform: uppercase;
    padding: 20px 0 20px 20px;
    line-height: 40px;
  }
}