/*
 * Arrow component styles — the only place arrows/chevrons are sized or aligned.
 * Markup comes from Parents360\Ui\Arrow (src/Ui/Arrow.php).
 *
 * Tunable per context via custom properties:
 *   --ui-arrow-size   icon box inside a button/link   (default 1.125rem)
 *   --ui-arrow-btn    button width = height           (default 2.25rem)
 *   --ui-caret-size   disclosure caret box            (default 1rem)
 */

/* ---------- Icon ---------- */
.ui-arrow {
  display: block;
  box-sizing: border-box;
  width: var(--ui-arrow-size, 1.125rem);
  height: var(--ui-arrow-size, 1.125rem);
  min-width: var(--ui-arrow-size, 1.125rem);
  flex: 0 0 auto;
  overflow: visible;
  pointer-events: none; /* clicks always target the control, never the <svg> */
}

/* Horizontal arrows mirror for right-to-left languages (Arabic portal). */
[dir="rtl"] .ui-arrow--bidi {
  transform: scaleX(-1);
}

/* ---------- Visually hidden text (accessible name for icon-only controls) ---------- */
.ui-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Icon-only button / link ---------- */
.ui-arrow-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--ui-arrow-btn, 2.25rem);
  height: var(--ui-arrow-btn, 2.25rem);
  min-width: var(--ui-arrow-btn, 2.25rem);
  min-height: var(--ui-arrow-btn, 2.25rem);
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ink, #1c2b33);
  font: inherit;
  line-height: 1;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s var(--ease-standard, ease), border-color .15s var(--ease-standard, ease),
    color .15s var(--ease-standard, ease), transform .1s var(--ease-standard, ease), opacity .15s ease;
}

.ui-arrow-btn--sm {
  --ui-arrow-btn: 1.75rem;
  --ui-arrow-size: 1rem;
}

/* Touch devices: 44×44 minimum hit area. */
@media (pointer: coarse) {
  .ui-arrow-btn--md {
    --ui-arrow-btn: 2.75rem;
  }
  .ui-arrow-btn--sm {
    --ui-arrow-btn: 2.25rem;
  }
}

/* Variants */
.ui-arrow-btn--ghost {
  border-color: var(--line, #d9e1e5);
  background: transparent;
  color: var(--ink, #1c2b33);
}
.ui-arrow-btn--plain {
  color: var(--muted, #5b6b73);
}
.ui-arrow-btn--solid {
  background: var(--teal, #1f8a7a);
  color: #fff;
}
.ui-arrow-btn--overlay {
  background: rgba(255, 255, 255, .22);
  color: #fff;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* Hover */
@media (hover: hover) {
  .ui-arrow-btn:hover {
    text-decoration: none;
  }
  .ui-arrow-btn--ghost:hover {
    background: rgba(31, 138, 122, .08);
    border-color: var(--teal, #1f8a7a);
  }
  .ui-arrow-btn--plain:hover {
    background: rgba(28, 43, 51, .07);
    color: var(--ink, #1c2b33);
  }
  .ui-arrow-btn--solid:hover {
    filter: brightness(1.08);
  }
  .ui-arrow-btn--overlay:hover {
    background: rgba(255, 255, 255, .4);
  }
}

/* Active (pressed) */
.ui-arrow-btn:active {
  transform: scale(.92);
}

/* Keyboard focus */
.ui-arrow-btn:focus {
  outline: none;
}
.ui-arrow-btn:focus-visible,
.ui-arrow-link:focus-visible {
  outline: 2px solid var(--teal, #1f8a7a);
  outline-offset: 2px;
}
.ui-arrow-btn--overlay:focus-visible {
  outline-color: #fff;
}

/* Disabled (native button or aria-disabled link) */
.ui-arrow-btn:disabled,
.ui-arrow-btn[aria-disabled="true"],
.ui-arrow-link[aria-disabled="true"] {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  filter: none;
}

/* ---------- Text link/button with arrow ---------- */
:where(.ui-arrow-link) {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  text-decoration: none;
}
.ui-arrow-link .ui-arrow {
  --ui-arrow-size: 1.1em; /* scales with the surrounding font size */
}
.ui-arrow-link__text {
  min-width: 0;
}
@media (hover: hover) {
  .ui-arrow-link--right:hover .ui-arrow,
  .ui-arrow-link--left:hover .ui-arrow {
    transform: translateX(2px);
  }
  .ui-arrow-link--left:hover .ui-arrow {
    transform: translateX(-2px);
  }
  [dir="rtl"] .ui-arrow-link--right:hover .ui-arrow--bidi {
    transform: scaleX(-1) translateX(2px);
  }
  [dir="rtl"] .ui-arrow-link--left:hover .ui-arrow--bidi {
    transform: scaleX(-1) translateX(-2px);
  }
}
.ui-arrow-link .ui-arrow {
  transition: transform .15s var(--ease-standard, ease);
}

/* ---------- Disclosure caret (accordion / dropdown / <details>) ---------- */
.ui-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--ui-caret-size, 1rem);
  height: var(--ui-caret-size, 1rem);
  min-width: var(--ui-caret-size, 1rem);
  flex: 0 0 auto;
  color: inherit;
  transition: transform .18s var(--ease-standard, ease);
}
.ui-caret .ui-arrow {
  --ui-arrow-size: 100%;
}
:is(button, summary, a, [role="button"])[aria-expanded="true"] .ui-caret,
details[open] > summary .ui-caret {
  transform: rotate(180deg);
}

/* ---------- Pager row (prev / label / next) ---------- */
.ui-pager {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

@media (prefers-reduced-motion: reduce) {
  .ui-arrow-btn,
  .ui-caret,
  .ui-arrow-link .ui-arrow {
    transition: none;
  }
  .ui-arrow-btn:active {
    transform: none;
  }
}

@media (forced-colors: active) {
  .ui-arrow-btn {
    border-color: ButtonText;
  }
  .ui-arrow-btn:disabled,
  .ui-arrow-btn[aria-disabled="true"] {
    border-color: GrayText;
    color: GrayText;
  }
}

@media print {
  .ui-arrow-btn {
    display: none;
  }
}