/**
 * Main wrapper
 */

.SelectSet *,
.SelectSet *::after,
.SelectSet *::before {
  box-sizing: inherit;
}

.SelectSet {
  width: 300px;
  max-width: calc(100vw - 30px);
  position: relative;
  font-family: 'Nunito Sans', sans-serif;
  box-sizing: border-box;

  ul, li, button {
   padding: 0;
   margin: 0;
  }

  /**
   * Value wrapper
   */
  .SelectSet__value {
    position: relative;
    z-index: 1;

    &::after {
      content: '';
      display: inline-block;
      position: absolute;
      top: calc(50% - 9px);
      right: 19px;
      width: 11px;
      height: 11px;
    }
  }

  /**
   * Input
   */
  .SelectSet__input-container {
    display: grid;
    align-items: center;
    margin-bottom: 10px;

    i {
     grid-row: 1;
     grid-column: 1;
     justify-self: start;

     font-size: 18px;
     padding: 0 0 0 20px;
    }
    .SelectSet__input {
     grid-row: 1;
     grid-column: 1;

     padding-left: 44px;
     margin-bottom: 0;
    }
  }

  .SelectSet__input {
    display: block;
    height: 36px;
    width: 100%;
    padding: 0 16px;
    background: #fff;
    border: 1px solid transparent;
    box-shadow: 0 .0625rem .125rem rgba(0, 0, 0, 0.15);
    border-radius: 3px;
    outline: none;
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    text-align: left;
    text-overflow: ellipsis;
    line-height: 36px;
    -webkit-appearance: none;
  }

  .SelectSet__input::-webkit-search-decoration,
  .SelectSet__input::-webkit-search-cancel-button,
  .SelectSet__input::-webkit-search-results-button,
  .SelectSet__input::-webkit-search-results-decoration {
    -webkit-appearance:none;
  }

  .SelectSet__input:not([readonly]):focus {
    cursor: initial;
  }

  /**
   * Options wrapper
   */
  .SelectSet__select {
    background: #fff;
    box-shadow: 0 .0625rem .125rem rgba(0, 0, 0, 0.15);
    // box-shadow: 5px 5px 10px rgba(0,0,0, 0.2);

    border: 1px solid #089dff;
    border-radius: 4px;
    width: 100%;

    // max-height: 300px;
    overflow-y: auto;
    position: absolute;
    z-index: 99999991;
  }

  .SelectSet__options {
    list-style: none;
    width: 100%
  }

  .SelectSet__row:not(:first-child) {
    border-top: 1px solid #eee;
  }

  .SelectSet__option,
  .SelectSet__not-found {
    // display: block;
    height: 36px;
    width: 100%;

    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    text-align: left;
    cursor: pointer;

    padding: 0 16px;
    background: #fff;
    border: none;
    outline: none;


    display: grid;
    grid-template-columns: 24px 1fr auto;
    // grid-auto-flow: column;
    grid-gap: 5px;
    // justify-content: start;
    align-content: center;
    align-items: center;

    i {
     justify-self: center;
     font-size: 18px;
    }
    span.set-code {
     font-size: 10px;
     letter-spacing: 1px;
     color: grey;
    }
  }

  .SelectSet__option {
    color: rgba(0,0,0, 0.9);

    padding: 0 12px;
    border-radius: 0;
    margin: 0;

    &:not(.is-selected):hover {
      background: rgba(155, 47, 204, 0.15);
    }
    &.is-highlighted {
      background: rgba(155, 47, 204, 0.35);
    }

    &.is-selected {
      background: #A22FCC;
      color: #fff;
      i, span { color: #fff; }

      &.is-highlighted, &:hover {
        color: #fff;
        i, span { color: #fff; }
        background: #purple;
      }
    }
  }

  /**
   * Group
   */
  .SelectSet__group-header {
    font-size: 10px;
    text-transform: uppercase;
    background: #eee;
    padding: 8px 16px;
  }

  /**
   * States
   */
  .SelectSet.is-disabled {
    opacity: 0.5;
  }

  .SelectSet.is-loading .SelectSet__value::after {
    // background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3E%3Cpath fill='%232F2D37' d='M25,5A20.14,20.14,0,0,1,45,22.88a2.51,2.51,0,0,0,2.49,2.26h0A2.52,2.52,0,0,0,50,22.33a25.14,25.14,0,0,0-50,0,2.52,2.52,0,0,0,2.5,2.81h0A2.51,2.51,0,0,0,5,22.88,20.14,20.14,0,0,1,25,5Z'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='0.6s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
    background-size: 11px;
  }

  .SelectSet:not(.is-disabled) .SelectSet__input {
    cursor: pointer;
  }

  /**
   * Modifiers
   */
  .SelectSet:not(.is-loading):not(.SelectSet--multiple) .SelectSet__value::after {
    transform: rotate(45deg);
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    pointer-events: none;
  }

  .SelectSet__not-found {
    height: auto;
    padding: 16px;
    text-align: center;
    color: #888;
  }
}
