@import "~@kaizen/design-tokens/sass/border";
@import "~@kaizen/design-tokens/sass/color";
@import "../../mixins";

// Classnames to simulate pseudo states in storybook
$story-className--clear-button-hover: ":global(.story__clear-button-hover)";
$story-className--clear-button-focus: ":global(.story__clear-button-focus)";

// Combined pseudo state classes
$selectors--clear-button-hover: "&:hover, &#{$story-className--clear-button-hover}";
$selectors--clear-button-focus: "&:focus-visible, &#{$story-className--clear-button-focus}";

.clearButton {
  @include button-reset;

  position: relative;
  display: inline-flex;

  #{$selectors--clear-button-hover} {
    cursor: pointer;
  }

  &:focus {
    outline: none;
  }

  #{$selectors--clear-button-focus} {
    &::after {
      $focus-ring-offset: -1px;

      content: "";
      position: absolute;
      background: transparent;
      border-width: $border-focus-ring-border-width;
      border-style: $border-focus-ring-border-style;
      border-radius: 50%;
      inset: $focus-ring-offset;
    }
  }
}

///////////////////////////////////////////////////
// THEMES
///////////////////////////////////////////////////
.default {
  color: $color-gray-500;

  #{$selectors--clear-button-hover},
  #{$selectors--clear-button-focus} {
    color: $color-purple-800;
  }

  #{$selectors--clear-button-focus} {
    &::after {
      border-color: $color-blue-500;
    }
  }
}

.reversed {
  color: rgba($color-white-rgb, 0.8);

  #{$selectors--clear-button-hover},
  #{$selectors--clear-button-focus} {
    color: $color-white;
  }

  #{$selectors--clear-button-focus} {
    &::after {
      border-color: $color-blue-300;
    }
  }
}