/**
 * 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
.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 {
    .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 {
    .close-focus-outline();
  }
}