@use "../../../variables/index" as *;

/**
 * Close - Close button component for dismissible elements
 *
 * Note: Uses $size-* tokens for sizing. Uses color tokens.
 *
 * Intentionally hardcoded values:
 * - Outline width (2px): Standard focus indicator
 * - Outline-offset (-2px): Inset positioning
 */

// Shared focus outline mixin
@mixin close-focus-outline() {
  outline: 2px solid $component-color-focus;
  outline-offset: -2px;
}

.close {
  float: right;
  color: $gray-50;
  font-weight: normal;
  font-size: $size-20;
  line-height: $size-16;

  &:hover,
  &:focus {
    color: $link-color-hover;
    text-decoration: none;
    cursor: pointer;
  }
  &:focus {
    @include close-focus-outline();
  }
}

/* Additional properties for button version
   iOS requires the button element instead of an anchor tag.
   If you want the anchor version, it requires `href="#"`.
   See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile */

button.close {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  &:focus {
    @include close-focus-outline();
  }
}