/*
  Styles for native dropdowns when custom styling is not available
*/

@supports not (appearance: base-select) {
  .a-input:has(select) {
    &:has(.a-input-adornments + select) {
      & .a-input-adornments:has(+ select) {
        padding-inline-start: var(--px);
        padding-inline-end: var(--gap);
      }
      & select {
        padding-inline-start: 0;
      }
    }
    &:has(select:not([multiple])) {
      & select {
        padding-inline-end: calc(var(--lens-core-spacing-2) + 11.37px + var(--lens-core-spacing-3));
      }
      &::after {
        display: block;
        position: absolute;
        background: var(--color);
        inset-inline-end: var(--lens-core-spacing-3);
        content: "";
        width: 11.37px;
        height: 6.71px;
        flex-shrink: 0;
        clip-path: polygon(
          50% 100%,
          0% 15.711%,
          9.32% 0%,
          50% 68.579%,
          90.68% 0%,
          100% 15.711%,
          50% 100%
        );
        pointer-events: none;
      }
    }
    &:has(select[multiple]) {
      height: auto;
    }
    &.a-input--sm:has(select:not([multiple])) {
      & select {
        padding-inline-end: calc(
          var(--lens-core-spacing-1) + var(--lens-core-spacing-3) + var(--lens-core-spacing-1)
        );
      }
      &::after {
        inset-inline-end: calc(
          var(--px) + (var(--lens-core-spacing-3) - var(--lens-semantic-icon-size-md)) / 2 +
            var(--lens-semantic-icon-size-md) * 0.2644
        );
        width: calc(var(--lens-semantic-icon-size-md) * 0.4712);
        height: calc(var(--lens-semantic-icon-size-md) * 0.2743);
        @container style(--atlas-theme: atlas) {
          inset-inline-end: calc(
            var(--px) + (var(--lens-core-spacing-3) - var(--lens-semantic-icon-size-sm)) / 2 +
              var(--lens-semantic-icon-size-sm) * 0.2644
          );
          width: calc(var(--lens-semantic-icon-size-sm) * 0.4712);
          height: calc(var(--lens-semantic-icon-size-sm) * 0.2743);
        }
      }
    }
  }
}

@supports (appearance: base-select) {
  .a-input:has(select) {
    --shadow: var(--a-input-listbox-shadow, var(--lens-semantic-shadow-low));
    --radius: var(--a-input-listbox-radius, var(--lens-semantic-radius-md));
    &:has(select:not([multiple]))::after {
      display: none;
    }
    &:has(select[multiple]) {
      height: auto;
      box-shadow: none;
      & select[multiple] {
        border-radius: inherit;
        scrollbar-width: thin;
      }
    }
    & select {
      appearance: base-select;
      &[multiple] {
        height: auto;
        padding: 0;
        border: var(--border-width) solid var(--border-color);
      }
      &::picker(select) {
        appearance: base-select;
        border: none;
        box-shadow: var(--shadow);
        border-radius: var(--radius);
        margin-block: var(--lens-core-spacing-0-5);
        max-height: 80svh;
        overflow-y: auto;
        transform-origin: top center;
        animation: a-dropdown-native-open var(--a-transition-duration) var(--a-transition-easing);
      }
      &::picker-icon {
        background: var(--color);
        width: 11.37px;
        height: 6.71px;
        clip-path: polygon(
          50% 100%,
          0% 15.711%,
          9.32% 0%,
          50% 68.579%,
          90.68% 0%,
          100% 15.711%,
          50% 100%
        );
        align-self: center;
        margin-inline-end: var(--lens-core-spacing-1-5);
      }
    }
    &.a-input--sm select::picker-icon {
      width: calc(var(--lens-semantic-icon-size-md) * 0.4712);
      height: calc(var(--lens-semantic-icon-size-md) * 0.2743);
      margin-inline-end: calc(
        (var(--lens-core-spacing-3) - var(--lens-semantic-icon-size-md)) / 2 +
          var(--lens-semantic-icon-size-md) * 0.2644
      );
      @container style(--atlas-theme: atlas) {
        width: calc(var(--lens-semantic-icon-size-sm) * 0.4712);
        height: calc(var(--lens-semantic-icon-size-sm) * 0.2743);
        margin-inline-end: calc(
          (var(--lens-core-spacing-3) - var(--lens-semantic-icon-size-sm)) / 2 +
            var(--lens-semantic-icon-size-sm) * 0.2644
        );
      }
    }
    & option {
      display: flex;
      flex-direction: row;
      padding: 0;
      padding-inline-end: var(--px);
      &::checkmark {
        visibility: visible;
        display: block;
        background: var(--color);
        content: "";
        width: 12.97px;
        height: 9.42px;
        clip-path: polygon(
          34.264% 100%,
          0% 52.807%,
          6.868% 43.348%,
          34.264% 81.082%,
          93.133% 0%,
          100% 9.459%,
          34.264% 100%
        );
        pointer-events: none;
        margin-inline-start: var(--padding-y);
      }
      &:has(.a-checkbox) {
        padding-inline-start: var(--lens-core-spacing-2);
        &::checkmark {
          display: none;
        }
        &:checked .a-checkbox {
          &::after {
            visibility: visible;
          }
          --bg: var(--lens-semantic-color-action-form-default-selected);
          --border-color: var(--lens-semantic-color-action-form-outline-selected);
        }
      }
      &:checked {
        &:not(.a-list-item--disabled) {
          --bg: var(--lens-semantic-color-selection-secondary-default);
          &:hover {
            --bg: var(--lens-semantic-color-selection-secondary-hover);
          }
          &:active {
            --bg: var(--lens-semantic-color-selection-secondary-active);
          }
        }
      }
    }
  }
}

@keyframes a-dropdown-native-open {
  from {
    opacity: 0;
    transform: scaleY(0.75);
  }
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}