@use "variables";

%select-description {
  position: absolute;
  bottom: 0px;
  width: 100%;
  font-size: variables.$font-size-small;
  line-height: variables.$line-height-base;
  color: variables.$text-disabled;
}

.fwe-select-wrapper {
  font-family: variables.$font-size-base;
  position: relative;
  display: flex;
  flex-direction: column;
  padding-bottom: 18px;

  &::before {
    pointer-events: none;
    position: absolute;
    bottom: 22px;
    left: calc(100% - 24px);
    content: "";
    height: 24px;
    width: 24px;

    -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iIzMzMyIgZD0iTTUuNjM2IDkuMTcyIDEyIDE1LjUzNmw2LjM2NC02LjM2NC0uNzA3LS43MDhMMTIgMTQuMTIxIDYuMzQzIDguNDY0bC0uNzA3LjcwOHoiIGRhdGEtbmFtZT0iY29udGVudCIvPjwvc3ZnPg==")
      center/24px 24px no-repeat;
    mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iIzMzMyIgZD0iTTUuNjM2IDkuMTcyIDEyIDE1LjUzNmw2LjM2NC02LjM2NC0uNzA3LS43MDhMMTIgMTQuMTIxIDYuMzQzIDguNDY0bC0uNzA3LjcwOHoiIGRhdGEtbmFtZT0iY29udGVudCIvPjwvc3ZnPg==")
      center/24px 24px no-repeat;
    background-color: variables.$text;
  }

  &:has(.fwe-select:disabled)::before {
    background-color: variables.$text-disabled;
  }

  .fwe-select-label {
    height: 18px;
    order: 1;
    color: variables.$text;
    font-size: variables.$font-size-small;
    line-height: variables.$line-height-base;
    font-weight: variables.$font-weight-bold;
  }

  .fwe-select {
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
    order: 2;
    height: 33px;
    padding-inline: unset;
    padding: 4px 24px 4px 0px;
    width: 100%;
    font-size: variables.$font-size-base;
    appearance: none;
    display: block;
    outline: 0;
    background: none;
    border: none;
    border-bottom: 1px solid variables.$control-border;

    &:hover,
    &:focus {
      &:not(:disabled) {
        color: variables.$hero;

        option {
          color: variables.$text;
        }

        border-color: variables.$hero;
      }

      &.fwe-invalid,
      &:user-invalid {
        border-color: variables.$red;
      }
    }

    &:disabled {
      cursor: default;

      ~ .fwe-select-label {
        color: variables.$text-disabled;
      }

      border-color: variables.$control-disabled;
    }

    &::-ms-expand {
      display: none;
    }

    &.fwe-invalid,
    &:user-invalid {
      box-shadow: none;
      border-color: variables.$red;

      ~ .fwe-select-invalid {
        display: block;
      }

      ~ .fwe-select-description {
        display: none;
      }
    }
  }

  .fwe-select-description {
    @extend %select-description;
  }

  .fwe-select-invalid {
    @extend %select-description;
    display: none;
    color: variables.$red;
  }
}

.fwe-options-container {
  max-width: 100%;
  background-color: variables.$white;
  padding: 16px 0px;
  margin: 0;
  box-shadow: 0 1px 8px 1px rgba(0, 0, 0, 0.2);
  list-style: none;

  &:focus {
    outline: none;
  }

  &--multi-select {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 12px;
  }
}

.fwe-combobox-option {
  padding: 8px 16px;
  cursor: pointer;
  position: relative;

  &:hover,
  &:focus,
  &.fwe-focus {
    background-color: variables.$background;
    color: variables.$hero;
  }

  &.fwe-selected {
    color: variables.$hero;

    &::before {
      content: "";
      width: 4px;
      height: 100%;
      background-color: variables.$hero;
      position: absolute;
      left: 0;
      top: 0;
    }
  }

  &.fwe-disabled {
    color: variables.$text-disabled;
    cursor: default;

    &:hover {
      background-color: transparent;
      color: variables.$text-disabled;
    }
  }
}