@use 'libs/components/theme/src/lib/styles/mixins' as mixins;
@use 'libs/components/theme/src/lib/styles/variables' as *;
@use 'libs/components/theme/src/lib/styles/compat-tokens-mixins' as compatMixins;

@include compatMixins.sky-default-overrides('.sky-dropdown-item') {
  --sky-override-dropdown-item-active-class-background: #{$sky-background-color-neutral-light};
  --sky-override-dropdown-item-border-radius: 0px;
  --sky-override-dropdown-item-box-shadow: none;
  --sky-override-dropdown-item-color-background: transparent;
  --sky-override-dropdown-item-color-text: #{$sky-text-color-default};
  --sky-override-dropdown-item-disabled-color-background: transparent;
  --sky-override-dropdown-item-disabled-color-text: var(
    --sky-text-color-deemphasized
  );
  --sky-override-dropdown-item-disabled-box-shadow: none;
  --sky-override-dropdown-item-disabled-font-size: 15px;
  --sky-override-dropdown-item-disabled-font-style: italic;
  --sky-override-dropdown-item-focus-visible-background: #{$sky-background-color-neutral-light};
  --sky-override-dropdown-item-hover-background: #{$sky-background-color-neutral-light};
  --sky-override-dropdown-item-margin: 4px;
  --sky-override-dropdown-item-padding: 3px #{$sky-padding-double};
}

@include compatMixins.sky-modern-overrides('.sky-dropdown-item', false) {
  --sky-override-dropdown-item-disabled-box-shadow: none;
  --sky-override-dropdown-item-disabled-color-background: transparent;
  --sky-override-dropdown-item-disabled-font-size: 15px;
  --sky-override-dropdown-item-disabled-font-style: italic;
}

.sky-dropdown-item {
  background-color: var(
    --sky-override-dropdown-item-color-background,
    --sky-color-background-action-tertiary-base
  );
  border: none;
  display: block;
  margin: var(--sky-override-dropdown-item-margin, 0);
  min-width: 160px;
  text-align: left;
  transition: box-shadow $sky-transition-time-short;

  &.sky-dropdown-item-active {
    a,
    button {
      background-color: var(
        --sky-override-dropdown-item-active-class-background,
        var(--sky-color-background-action-tertiary-active)
      );
    }
  }

  & > a,
  & > button {
    border-radius: var(
      --sky-override-dropdown-item-border-radius,
      var(--sky-border-radius-s)
    );

    background-color: var(
      --sky-override-dropdown-item-color-background,
      --sky-color-background-action-tertiary-base
    );
    box-shadow: var(
      --sky-override-dropdown-item-box-shadow,
      inset 0 0 0 var(--sky-border-width-action-base)
        var(--sky-color-border-action-tertiary-base)
    );
    border: none;
    color: var(
      --sky-override-dropdown-item-color-text,
      var(--sky-color-text-default)
    );
    cursor: pointer;
    display: block;
    padding: var(
      --sky-override-dropdown-item-padding,
      var(--sky-space-inset-pillarbox-1_2-top-m)
        var(--sky-space-inset-pillarbox-1_2-left-m)
        var(--sky-space-inset-pillarbox-1_2-bottom-m)
        var(--sky-space-inset-pillarbox-1_2-right-m)
    );
    text-align: left;
    width: 100%;

    &:hover {
      text-decoration: none;
      background-color: var(
        --sky-override-dropdown-item-hover-background,
        var(--sky-color-background-action-tertiary-hover)
      );
      box-shadow: var(
        --sky-override-dropdown-item-box-shadow,
        inset 0 0 0 var(--sky-border-width-action-hover)
          var(--sky-color-border-action-tertiary-hover)
      );
    }

    &:active {
      background-color: var(
        --sky-override-dropdown-item-color-background,
        var(--sky-color-background-action-tertiary-active)
      );
      box-shadow: var(
        --sky-override-dropdown-item-box-shadow,
        inset 0 0 0 var(--sky-border-width-action-active)
          var(--sky-color-border-action-tertiary-active)
      );
    }

    &:focus-visible:not(:active) {
      background-color: var(
        --sky-override-dropdown-item-focus-visible-background,
        var(--sky-color-background-action-tertiary-focus)
      );
      box-shadow: var(
        --sky-override-dropdown-item-box-shadow,
        inset 0 0 0 var(--sky-border-width-action-focus)
          var(--sky-color-border-action-tertiary-focus),
        var(--sky-elevation-focus)
      );
    }

    &[disabled] {
      &,
      &:hover,
      &:focus-visible,
      &:active {
        box-shadow: var(
          --sky-override-dropdown-item-disabled-box-shadow,
          inset 0 0 0 var(--sky-border-width-action-disabled)
            var(--sky-color-border-action-tertiary-disabled)
        );
        background-color: var(
          --sky-override-dropdown-item-disabled-color-background,
          var(--sky-color-background-action-tertiary-disabled)
        );
        color: var(
          --sky-override-dropdown-item-disabled-color-text,
          var(--sky-color-text-deemphasized)
        );
        cursor: default;
        font-size: var(
          --sky-override-dropdown-item-disabled-font-size,
          inherit
        );
        font-style: var(
          --sky-override-dropdown-item-disabled-font-style,
          inherit
        );

        &:focus-visible {
          box-shadow: var(
            --sky-override-dropdown-item-disabled-box-shadow,
            inset 0 0 0 var(--sky-border-width-action-disabled)
              var(--sky-color-border-action-tertiary-disabled)
          );
        }
      }
    }
  }
}

@include mixins.sky-theme-modern {
  .sky-dropdown-item {
    & > a,
    & > button {
      outline: none;
    }
  }
}
