/* Close Button component styles */

/* Base close button styles */
.close-button {
  @apply relative isolate inline-flex h-6 w-6 shrink-0 origin-center items-center justify-center rounded-xl p-1 select-none no-highlight;

  /* Cursor */
  cursor: var(--cursor-interactive);

  /**
   * Transitions
   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
   */
  transition:
    transform 250ms var(--ease-out-quart),
    color 150ms var(--ease-out),
    background-color 100ms var(--ease-out),
    box-shadow 150ms var(--ease-out);
  @apply transform-gpu motion-reduce:transition-none;

  /* Focus visible state */
  &:focus-visible:not(:focus),
  &[data-focus-visible="true"] {
    @apply status-focused;
  }

  /* Disabled state */
  &:disabled,
  &[aria-disabled="true"] {
    @apply status-disabled;
  }

  /* Pending state */
  &[data-pending="true"] {
    @apply status-pending;
  }

  /* SVG icon styling*/
  & svg {
    @apply pointer-events-none;
    @apply size-4 shrink-0 self-center;
    @apply -mx-0.5 my-0.5;
  }
}

/* Variants */
.close-button--default {
  @apply bg-default text-muted;

  &:active,
  &[data-pressed="true"] {
  }

  @media (hover: hover) {
    &:hover,
    &[data-hovered="true"] {
      @apply bg-default-hover;
    }
  }

  &:active,
  &[data-pressed="true"] {
    transform: scale(0.93);
  }
}