@use "../functions" as *;
@use "../mixins/border-radius" as *;
@use "../mixins/focus-ring" as *;
@use "../mixins/tokens" as *;

$btn-close-tokens: () !default;

// scss-docs-start btn-close-tokens
// stylelint-disable-next-line scss/dollar-variable-default
$btn-close-tokens: defaults(
  (
    --btn-close-size: 1.25rem,
    --btn-close-color: inherit,
    --btn-close-opacity: .5,
    --btn-close-hover-opacity: .75,
    --btn-close-focus-opacity: .85,
    --btn-close-disabled-opacity: .25,
  ),
  $btn-close-tokens
);
// scss-docs-end btn-close-tokens

// 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

@layer components {
  .btn-close {
    @include tokens($btn-close-tokens);

    box-sizing: content-box;
    width: var(--btn-close-size);
    height: var(--btn-close-size);
    padding: 0;
    color: var(--btn-close-color);
    background: transparent; // for button elements
    border: 0; // for button elements
    @include border-radius(var(--border-radius-sm));
    opacity: var(--btn-close-opacity);

    > svg {
      display: block;
      width: 100%;
      height: 100%;
      fill: currentcolor;
    }

    // Override <a>'s hover style
    &:hover {
      color: var(--btn-close-color);
      text-decoration: none;
      opacity: var(--btn-close-hover-opacity);
    }

    &:focus-visible {
      opacity: var(--btn-close-focus-opacity);
      @include focus-ring();
    }

    &:disabled,
    &.disabled {
      pointer-events: none;
      user-select: none;
      opacity: var(--btn-close-disabled-opacity);
    }
  }
}