@use '../config' as *;

.btn-close {
  --btn-close-color: currentColor;
  --btn-close-bg: #{escape-svg($btn-close-bg)};
  --btn-close-opacity: #{$btn-close-opacity};
  --btn-close-hover-opacity: #{$btn-close-hover-opacity};
  --btn-close-focus-shadow: #{$btn-close-focus-shadow};
  --btn-close-focus-opacity: #{$btn-close-focus-opacity};
  --btn-close-disabled-opacity: #{$btn-close-disabled-opacity};
  --btn-close-size: #{$btn-close-width};
  position: relative;
  display: block;

  width: var(--btn-close-size);
  height: var(--btn-close-size);
  padding: $btn-close-padding-y $btn-close-padding-x;
  color: var(--btn-close-color);
  cursor: pointer;
  background-color: var(--btn-close-color);
  border: 0;
  opacity: var(--btn-close-opacity);
  mask: var(--btn-close-bg) no-repeat center/calc(var(--btn-close-size) * 0.75);
  @include border-radius(var(--border-radius));

  // Invisible overlay extending the hit area to a 24x24px minimum touch target
  &::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, 24px);
    height: max(100%, 24px);
    content: '';
    transform: translate(-50%, -50%);
  }

  &:hover {
    color: var(--btn-close-color);
    text-decoration: none;
    background-color: var(--btn-close-color);
    opacity: var(--btn-close-hover-opacity);
  }

  &:focus {
    outline: 0;
    box-shadow: var(--btn-close-focus-shadow);
    opacity: var(--btn-close-focus-opacity);
  }

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

  @include media-print() {
    display: none;
  }
}

// @mixin btn-close-white() {
//   --btn-close-filter: #{$btn-close-filter-dark};
// }

// .btn-close-white {
//   @include btn-close-white();
// }

// :root,
// [data-bs-theme="light"] {
//   --btn-close-filter: #{$btn-close-filter};
// }

// @if $enable-dark-mode {
//   @include color-mode(dark, true) {
//     @include btn-close-white();
//   }
// }