@use '../abstracts/functions' as fn;
@use '../base/globals' as gb;

.custom-select {
  position: relative;
  width: auto;
  min-width: fn.rem(134px);
  user-select: none;

  &--nobg {
    .custom-select__trigger {
      background: transparent;
      padding: 0;

      &:hover {
        background: transparent;

        svg rect {
          fill-opacity: 0.15;
        }
      }
    }
  }

  select {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
  }

  &__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: fn.rem(8px);
    width: 100%;
    height: fn.rem(40px);
    padding: fn.rem(8px) fn.rem(10px) fn.rem(8px) fn.rem(14px);
    background: #131313;
    border: none;
    border-radius: fn.rem(12px);
    cursor: pointer;
    outline: none;
    transition: background 0.2s ease;

    &:focus-visible {
      outline: 2px solid rgba(gb.$color, 0.4);
      outline-offset: 2px;
    }

    &:hover {
      background: #1e1e1e;
    }
  }

  &__value {
    font-weight: 400;
    font-size: fn.rem(14px);
    color: rgba(gb.$color, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;

    &.is-active {
      color: gb.$color;
    }
  }

  &__arrow {
    flex-shrink: 0;
    transition: transform 0.25s ease;
    width: fn.rem(14px);
    height: fn.rem(14px);

    rect {
      transition: fill-opacity 0.25s ease;
    }
  }

  &__dropdown {
    position: absolute;
    top: calc(100% + fn.rem(6px));
    left: 0;
    right: 0;
    min-width: 100%;
    background: #131313;
    border-radius: fn.rem(12px);
    padding: fn.rem(6px);
    margin: 0;
    list-style: none;
    z-index: 100;
    overflow: hidden;

    opacity: 0;
    transform: translateY(fn.rem(-8px));
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
  }

  &__option {
    font-weight: 400;
    font-size: fn.rem(14px);
    color: rgba(gb.$color, 0.5);
    padding: fn.rem(8px) fn.rem(10px);
    border-radius: fn.rem(8px);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;

    &:hover {
      background: rgba(gb.$color, 0.06);
      color: gb.$color;
    }

    &.is-selected {
      color: gb.$color;
      background: rgba(gb.$color, 0.08);
    }
  }

  &.is-open {

    .custom-select__arrow {
      transform: rotate(180deg);
    }

    .custom-select__dropdown {
      opacity: 1;
      transform: translateY(0);
      pointer-events: all;
    }

    .custom-select__trigger {
      background: #1e1e1e;
    }
  }
}