@use "../../foundations/helpers/forward.helpers.scss" as *;
@use "../icon-sprite/icon-sprite.scss";
@use "../spinner/spinner.scss" as *;

$ds-pill-outlined__border-width: ds-border-width(xxs);
@function _pill-brdr($value, $rem: false) {
  $value: (ds-strip-unit($value) - ds-strip-unit($ds-pill-outlined__border-width)) * 1px;
  @if $rem {
    @return ds-px-to-rem($value);
  }
  @return $value;
}

.ds-pill {
  cursor: pointer;
  border: $ds-pill-outlined__border-width solid $ds-color-border-primary;
  border-radius: 100px;
  position: relative;
  background-color: $ds-color-surface-primary;
  color: $ds-color-text-primary;
  text-decoration: none;
  @include ds-typography($variable: $ds-typography-functional-body-sm, $fontWeight: $ds-fontweight-medium);

  &.ds-pill--sm {
    padding: _pill-brdr(ds-spacing($ds-s-025), true) _pill-brdr(ds-spacing($ds-s-050), true)
      _pill-brdr(ds-spacing($ds-s-025), true) _pill-brdr(ds-spacing($ds-s-075), true);
    height: 32px;
  }

  &.ds-pill--lg {
    padding: _pill-brdr(ds-spacing($ds-s-050), true) _pill-brdr(ds-spacing($ds-s-075), true)
      _pill-brdr(ds-spacing($ds-s-050), true) _pill-brdr(ds-spacing($ds-s-100), true);
    height: 40px;
  }

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

  @include min-click-surface();

  @include ds-hover() {
    &:hover {
      opacity: $ds-opacity-component-hover-pressed;
    }
  }

  &.ds-pill--selected {
    background-color: $ds-color-surface-brand;
    border-color: $ds-color-surface-brand;
    color:  $ds-color-surface-primary;
  }

  &.ds-pill--button.ds-pill--lg {
    padding: ds-spacing($ds-s-050, rem) ds-spacing($ds-s-100, rem);
  }

  &.ds-pill--button.ds-pill--sm {
    padding: ds-spacing($ds-s-050, rem) ds-spacing($ds-s-100, rem);
  }
}

.ds-pill--link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  .ds-icon {
    display: flex;
    height: ds-px-to-rem(20px);
    width: ds-px-to-rem(20px);
    margin: ds-spacing(0 0 0 $ds-s-050, rem);
    svg {
      fill: $ds-color-surface-brand;
    }
  }

  &.ds-pill--sm .ds-icon {
    margin: ds-spacing(0 0 0 $ds-s-025, rem);
  }
}