@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-sort-item') {
  --sky-override-sort-item-active-class-background: #{$sky-background-color-neutral-light};
  --sky-override-sort-item-border-left-selected: none;
  --sky-override-sort-item-border-radius: 0px;
  --sky-override-sort-item-box-shadow: none;
  --sky-override-sort-item-color-background: transparent;
  --sky-override-sort-item-color-selected: #{$sky-background-color-selected};
  --sky-override-sort-item-color-selected: inherit;
  --sky-override-sort-item-color-text: #{$sky-text-color-default};
  --sky-override-sort-item-focus-visible-background: #{$sky-background-color-neutral-light};
  --sky-override-sort-item-font-weight-selected: 600;
  --sky-override-sort-item-hover-background: #{$sky-background-color-neutral-light};
  --sky-override-sort-item-margin: 4px;
  --sky-override-sort-item-padding: 3px #{$sky-padding-double};
  --sky-override-sort-item-padding-left-selected: #{$sky-padding-double};
  --sky-override-sort-item-padding-selected: 4px;
}

@include compatMixins.sky-modern-overrides('.sky-sort-item', false) {
  --sky-override-sort-item-width-border-selected: var(--modern-size-3);
  --sky-override-sort-item-color-selected: transparent;
}

.sky-sort-item {
  background-color: var(
    --sky-override-sort-item-color-background,
    --sky-color-background-action-tertiary-base
  );
  box-shadow: var(
    --sky-override-sort-item-box-shadow,
    inset 0 0 0 var(--sky-border-width-action-base)
      var(--sky-color-border-action-tertiary-base)
  );
  border: none;
  cursor: pointer;
  margin: var(--sky-override-sort-item-margin, 0);

  & button {
    border-radius: var(
      --sky-override-sort-item-border-radius,
      var(--sky-border-radius-s)
    );
    text-align: left;
    width: 100%;
    outline: none;
    border: none;
    // The position relative ensures that the box shadows are not cut off by the selected item.
    position: relative;
    background-color: transparent;
    color: var(
      --sky-override-sort-item-color-text,
      var(--sky-color-text-deemphasized)
    );

    padding: var(
      --sky-override-sort-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)
    );

    &:hover {
      text-decoration: none;
      background-color: var(
        --sky-override-sort-item-hover-background,
        var(--sky-color-background-action-tertiary-hover)
      );
      box-shadow: var(
        --sky-override-sort-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-sort-item-color-background,
        var(--sky-color-background-action-tertiary-active)
      );
      box-shadow: var(
        --sky-override-sort-item-box-shadow,
        inset 0 0 0 var(--sky-border-width-action-active)
          var(--sky-color-border-action-tertiary-active)
      );
    }

    &:focus-visible:not(:active),
    &:focus-within:not(:active) {
      background-color: var(
        --sky-override-sort-item-focus-visible-background,
        var(--sky-color-background-action-tertiary-focus)
      );
      box-shadow: var(
        --sky-override-sort-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-sort-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-sort-item-disabled-color-background,
          var(--sky-color-background-action-tertiary-disabled)
        );
        color: var(
          --sky-override-sort-item-disabled-color-text,
          var(--sky-color-text-deemphasized)
        );
        cursor: default;
        font-size: var(--sky-override-sort-item-disabled-font-size, inherit);
        font-style: var(--sky-override-sort-item-disabled-font-style, inherit);

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

.sky-sort-item-selected {
  background-color: var(
    --sky-override-sort-item-color-selected,
    var(--sky-color-background-selected-soft)
  );
  border-left: var(
    --sky-override-sort-item-border-left-selected,
    solid
      var(
        --sky-override-sort-item-width-border-selected,
        var(--sky-border-width-selected-l)
      )
      var(--sky-color-border-selected)
  );
  border-radius: var(
    --sky-override-sort-item-border-radius,
    0 var(--sky-border-radius-s) var(--sky-border-radius-s) 0
  );
  padding: var(--sky-override-sort-item-padding-selected, 0);
  margin: 0;

  & button {
    padding-left: var(
      --sky-override-sort-item-padding-left-selected,
      calc(
        var(--sky-space-inset-pillarbox-1_2-left-m) - var(
            --sky-override-sort-item-width-border-selected,
            var(--sky-border-width-selected-l)
          )
      )
    );
    border-radius: var(
      --sky-override-sort-item-border-radius,
      0 var(--sky-border-radius-s) var(--sky-border-radius-s) 0
    );
    font-weight: var(
      --sky-override-sort-item-font-weight-selected,
      var(--sky-font-weight-body-m)
    );
    color: var(
      --sky-override-sort-item-color-text,
      var(--sky-color-text-default)
    );
  }
}
