@use "../base/color" as cl;
@use "../base/size" as sz;
@use "../base/mixins/meta-class" as mc;

// Interaction & elevation utilities
//
// These carry their own states, so there is no separate `qo-hover-*` family
// to remember — `qo-focusable` is the focus ring, `qo-clickable` is the whole
// pointer affordance.

@include mc.meta("qo-shadow-none", (box-shadow: none));
@include mc.meta("qo-shadow-sm", (box-shadow: cl.$shadow-sm));
@include mc.meta("qo-shadow-md", (box-shadow: cl.$shadow-md));
@include mc.meta("qo-shadow-lg", (box-shadow: cl.$shadow-lg));
@include mc.meta("qo-shadow-xl", (box-shadow: cl.$shadow-xl));

// Component heights, so a bare div can line up with a control.
@include mc.meta("qo-h-control", (height: sz.$control-height));
@include mc.meta("qo-h-control-sm", (height: sz.$control-height-sm));
@include mc.meta("qo-h-badge", (height: sz.$badge-height));
@include mc.meta("qo-h-grid-header", (height: sz.$grid-header-height));
@include mc.meta("qo-h-grid-filter", (height: sz.$grid-filter-height));
@include mc.meta("qo-h-grid-row", (height: sz.$grid-row-height));
@include mc.meta("qo-min-h-control", (min-height: sz.$control-height));

// Give anything the theme's single focus treatment.
.qo-focusable:focus-visible {
  outline: 0;
  box-shadow: cl.$focus-ring;
}
.qo-focus-ring { box-shadow: cl.$focus-ring; }

// The full interactive affordance for a non-button element.
.qo-clickable {
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;

  &:hover { background-color: cl.$background-hover; }
  &:focus-visible { outline: 0; box-shadow: cl.$focus-ring; }
}

// Hover feedback without a colour change — for cards and tiles.
.qo-hoverable {
  transition: box-shadow 0.2s ease;
  &:hover { box-shadow: cl.$shadow-md; }
}

.qo-no-hover:hover { background-color: transparent; }

// Screen-reader-only, for the icon-button labels the spec requires.
.qo-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

// Honour a reduced-motion preference across every transition above.
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}