// Transparent background and border properties included 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

.btn-close {
  // scss-docs-start close-css-vars
  --#{$prefix}btn-close-color: #{$btn-close-color};
  --#{$prefix}btn-close-bg: #{$btn-close-bg}; // OUDS mod: don't use escape-svg()
  // OUDS mod: no --#{$prefix}btn-close-opacity
  // OUDS mod: no --#{$prefix}btn-close-hover-opacity
  // OUDS mod: no --#{$prefix}btn-close-focus-shadow
  // OUDS mod: no --#{$prefix}btn-close-focus-opacity
  // OUDS mod: no --#{$prefix}btn-close-disabled-opacity
  // OUDS mod: no --#{$prefix}btn-close-white-filter
  --#{$prefix}btn-close-padding: #{$btn-close-padding}; // OUDS mod
  --#{$prefix}btn-close-border-width: #{$btn-close-border-width}; // OUDS mod
  --#{$prefix}btn-close-border-color: #{$btn-close-border-color}; // OUDS mod
  --#{$prefix}btn-close-hover-color: #{$btn-close-hover-color}; // OUDS mod
  --#{$prefix}btn-close-active-color: #{$btn-close-active-color}; // OUDS mod
  --#{$prefix}btn-close-active-border-color: #{$btn-close-active-border-color}; // OUDS mod
  --#{$prefix}btn-close-disabled-color: #{$btn-close-disabled-color}; // OUDS mod
  // scss-docs-end close-css-vars

  // OUDS mod: no box-sizing, width nor height
  padding: var(--#{$prefix}btn-close-padding); // OUDS mod
  color: var(--#{$prefix}btn-close-color);
  background-color: var(--#{$prefix}btn-close-bg); // OUDS mod: instead of background
  border: var(--#{$prefix}btn-close-border-width) solid var(--#{$prefix}btn-close-border-color); // OUDS mod
  // OUDS mod: no filter
  @include border-radius();
  // OUDS mod: no opacity
  @include button-icon($btn-close-bg, $btn-close-width, $btn-close-height, $btn-close-icon-size); // OUDS mod: using mask instead of background

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

  // OUDS mod: no &:focus

  // OUDS mod
  &:hover,
  &:active {
    border: var(--#{$prefix}btn-close-border-width) solid var(--#{$prefix}btn-close-active-border-color);
  }

  &:active {
    color: var(--#{$prefix}btn-close-active-color);
  }
  // End mod

  &:disabled,
  &.disabled {
    color: var(--#{$prefix}btn-close-disabled-color); // OUDS mod
    pointer-events: none;
    user-select: none;
    // OUDS mod: no opacity
  }
}