@use "../../foundations/helpers/forward.helpers.scss" as *;
@use "../../assets/form-field/form-field.scss";

.ds-select {
  $ds-select__icon-size: 24px;
  color: $ds-color-text-primary;
  position: relative;
  padding-top: ds-spacing($ds-s-050, rem);

  .ds-select__inner {
    position: relative;
  }

  .ds-icon {
    pointer-events: none;
    position: absolute;
    width: $ds-select__icon-size;
    right: ds-spacing($ds-s-075);

    svg {
      width: $ds-select__icon-size;
    }
  }

  .ds-select__input {
    // Remove default styling of select arrow
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;

    color: transparent;
    box-sizing: border-box;
    cursor: pointer;
    width: 100%;
    background-color: $ds-color-surface-primary;
    padding: ds-px-to-rem(ds-spacing($ds-s-100) - ds-border-width(xxs)) ds-spacing($ds-s-100) - ds-border-width(xxs);
    padding-right: ds-spacing($ds-s-250);
    border: solid ds-border-width(xxs) $ds-color-border-primary-strong;
    border-radius: ds-border-radius(025);
    margin: 0;
    @include ds-typography($ds-typography-functional-body-md);

    &:disabled {
      cursor: not-allowed;

      + .ds-select__label {
        color: $ds-color-text-primary-disabled;
        cursor: not-allowed;
      }
    }

    &:focus-visible {
      outline: ds-border-width(xs) solid #{$ds-color-border-primary-strongest};
      outline-offset: 2px;
    }
  }

  .ds-select__label {
    position: absolute;
    top: ds-spacing($ds-s-075);
    left: ds-spacing($ds-s-075);
    padding: ds-spacing($ds-s-025);
    z-index: 1;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.1s ease-in, top 0.1s ease-in;
    max-width: calc(100% - ds-spacing($ds-s-250));
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    @include ds-typography($ds-typography-functional-body-md);
  }

  &:has(select option:checked:not([value=""])) .ds-select__label {
    background-color: $ds-color-surface-primary;
    opacity: 1;
    top: -#{ds-spacing($ds-s-100)};
    width: auto;
  }

  &:has(select option:checked:not([value=""])) .ds-select__input {
    color: $ds-color-text-primary;
  }
}