/* Button Component Styles */

/* Button Icons */
.btn__icon {
  width: 16px;
  height: 16px;
  margin-right: var(--space-xs);
  vertical-align: middle;
}

/* ==========================================================================
 * FND-7 / DONI-714 — the measured button.
 *
 * Source: Figma component set `Button 4005:4926`, page `1:5`. SIXTEEN
 * variants — Style = Filled | Outline | Link | Icon, crossed with
 * State = Default | Hover | Pressed | Disabled. Every value below is read
 * from a variant node, and the node id is on the rule.
 *
 * | Style   | Size    | Radius |
 * |---------|---------|--------|
 * | Filled  | 168×48  | 999px  |
 * | Outline | 168×48  | 999px  |
 * | Link    | 128×24  | 8px    |
 * | Icon    | 48×48   | 999px  |
 *
 * 🔴 `.btn--outline` is canonical. `.btn--secondary` was the drift and is
 * GONE — the design system's own property value is `Style=Outline`. That is
 * BLK-23 (DONI-688), closed citing `4005:4926`. Do not reintroduce it.
 *
 * 🔴 Pressed is a REAL state on all four styles, not an invention. Nodes
 * `10211:15833`, `10211:15837`, `10211:15841`, `10211:15844`. Mapped to
 * `:active`. Page-derived measurements missed it entirely.
 *
 * ⚠️ Outline's 3px stroke is INSIDE the 48px box. `box-sizing: border-box`
 * is what makes it measure the 48 Figma draws instead of 54.
 * ========================================================================== */

/* Base Button — `Style=Filled, State=Default` 4005:4921 geometry. */
.btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  block-size: 48px;
  padding: 10px 16px 10px 24px;
  border: 3px solid transparent;
  border-radius: 999px;
  font-family: var(--font-agenda);
  /* `Body Bold` — Agenda Bold 700, Size/Body. Figma lineHeight 100 = auto;
     `normal` is correct on Agenda (1.16 vs an implied 1.19). */
  font-size: var(--size-body);
  font-weight: 700;
  line-height: normal;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--transition-fast),
    border-color var(--transition-fast), color var(--transition-fast);
  position: relative;
}

/* Focus is NOT set here. css/base/a11y.css (FND-5 / DONI-708) owns the ring
   for the whole theme. A `.btn:focus { outline: 2px solid coral }` used to
   live here — coral on a coral button measures 1:1, so it was invisible. */

/* Disabled. Figma draws a real disabled fill rather than an opacity fade,
   so no `opacity: 0.5`. `pointer-events: none` is deliberately absent:
   it would also remove the cursor feedback that tells a user why nothing
   happened. `:disabled` already blocks activation. */
.btn:disabled,
.btn.disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
}

/* The 24×24 icon box holding a 9×16 chevron. `4042:346` and friends. */
.btn .btn__icon,
.btn .icon {
  inline-size: 24px;
  block-size: 24px;
  flex: 0 0 24px;
}

/* Button Variants */

/* --- Style=Filled ---------------------------------------------------- */

.btn--primary {                                  /* 4005:4921 */
  background-color: var(--color-coral);
  color: var(--color-white);
  border-color: transparent;
}

.btn--primary:hover:not(:disabled) {             /* 4014:96 */
  background-color: var(--color-dark-coral);
  color: var(--color-white);
  text-decoration: none;
}

.btn--primary:active:not(:disabled) {            /* 10211:15833 */
  background-color: var(--color-coral-pressed);
}

.btn--primary:disabled,
.btn--primary.disabled {                         /* 4015:89 */
  background-color: var(--color-steel);
  color: var(--color-charcol);
}

/* Trailing chevron — resource-card CTA shape with a link arrow instead of
   download. Used by Text WYSIWYG (`Button — primary (arrow)`) and webform
   confirmation messages. */
/* Masked rather than drawn as a background image: chevron-right.svg is
   hardcoded white, which is invisible on `.btn--outline` — a pairing
   filter.format.canvas_html_block.yml already allows. currentColor keeps
   the filled variant identical and makes the arrow follow every other
   style's own text colour, including disabled. */
.btn--with-arrow::after {
  content: '';
  inline-size: 24px;
  block-size: 24px;
  flex: 0 0 24px;
  background-color: currentColor;
  -webkit-mask: url('../../images/icons/chevron-right.svg') center / contain no-repeat;
  mask: url('../../images/icons/chevron-right.svg') center / contain no-repeat;
}

.btn--with-arrow-left::before {
  content: '';
  inline-size: 24px;
  block-size: 24px;
  flex: 0 0 24px;
  background: url('../../images/icons/chevron-left-dark-coral.svg') center / contain no-repeat;
}

/* 🔴 `.btn--secondary` DELETED — FND-7 / DONI-714.
 *
 * It was the same idea as `.btn--outline` under a name the design system
 * does not use. `4005:4926`'s own property value is `Style=Outline`, so
 * `.btn--outline` governs and this was the drift. BLK-23 (DONI-688) closed
 * on that node.
 *
 * Its two usages, both in `twigify/study-info.html.twig` (lines 22 and 311),
 * are repointed at `.btn--outline` in the same commit. Do not re-add it — a
 * second name for one variant is how the two definitions drift apart. */


/* Secondary Button */
.btn--tertiary {
  background-color: var(--color-white);
  color: var(--color-primary);
  border-color: var(--color-primary);
  border-radius: 999px !important;
  font-weight: 700;
}

.btn--tertiary:hover:not(:disabled) {
  background-color: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn--tertiary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* --- Style=Outline ---------------------------------------------------- */

.btn--outline {                                  /* 4005:4927 */
  background-color: var(--color-white);
  color: var(--color-coral);
  border-color: var(--color-coral);
}

.btn--outline:hover:not(:disabled) {             /* 4014:100 */
  background-color: var(--color-light-melon);
  color: var(--color-coral);
  text-decoration: none;
}

.btn--outline:active:not(:disabled) {            /* 10211:15837 */
  background-color: var(--color-melon);
}

.btn--outline:disabled,
.btn--outline.disabled {                         /* 4015:93 */
  background-color: var(--color-steel);
  color: var(--color-charcol);
  border-color: var(--color-charcol);
}

/* --- Style=Link ------------------------------------------------------- */

/* 128×24, radius 8, no fill, no border, and the row bottom-aligns.
   `items-end` on 4005:4959 is not a rounding artefact — the chevron's
   optical centre sits above the text baseline otherwise. */
.btn--link {                                     /* 4005:4959 */
  block-size: 24px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  align-items: flex-end;
  background-color: transparent;
  color: var(--color-coral);
}

.btn--link:hover:not(:disabled) {                /* 4014:104 */
  color: var(--color-dark-coral);
}

.btn--link:active:not(:disabled) {               /* 10211:15844 */
  color: var(--color-coral-pressed);
}

.btn--link:disabled,
.btn--link.disabled {                            /* 4015:97 */
  color: var(--color-steel);
}

.btn--link.btn--with-arrow-left {
  align-items: center;
}

/* --- Style=Icon ------------------------------------------------------- */

/* 48×48 with 12px padding. That clears this project's 44×44 target-size
   policy on its own, so CMP-7 does not need to re-derive it. */
.btn--icon {                                     /* 4051:689 */
  inline-size: 48px;
  block-size: 48px;
  padding: 12px;
  border-color: transparent;
  background-color: var(--color-coral);
  color: var(--color-white);
}

.btn--icon:hover:not(:disabled) {                /* 4051:693 */
  background-color: var(--color-dark-coral);
}

.btn--icon:active:not(:disabled) {               /* 10211:15841 */
  background-color: var(--color-coral-pressed);
}

.btn--icon:disabled,
.btn--icon.disabled {                            /* 4051:697 */
  background-color: var(--color-steel);
}

/* Ghost Button */
.btn--ghost {
  background-color: transparent;
  color: var(--color-primary);
  border-color: transparent;
}

.btn--ghost:hover:not(:disabled) {
  background-color: var(--color-gray-100);
  color: var(--color-primary-dark);
}

/* Dark Button */
.btn--dark {
  background-color: var(--color-secondary);
  color: var(--color-white);
  border-color: var(--color-secondary);
}

.btn--dark:hover:not(:disabled) {
  background-color: var(--color-secondary-dark);
  border-color: var(--color-secondary-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Light Button */
.btn--light {
  background-color: var(--color-gray-100);
  color: var(--color-text-primary);
  border-color: var(--color-gray-200);
}

.btn--light:hover:not(:disabled) {
  background-color: var(--color-gray-200);
  border-color: var(--color-gray-300);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Button Sizes */

/* Small */
.btn--sm {
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
}

/* Large */
.btn--lg {
  padding: var(--space-md) var(--space-xl);
  font-size: var(--font-size-lg);
  border-radius: var(--radius-lg);
}

/* Extra Large */
.btn--xl {
  padding: var(--space-lg) var(--space-2xl);
  font-size: var(--font-size-xl);
  border-radius: var(--radius-lg);
}

/* Button States */

/* Full Width */
.btn--block {
  display: flex;
  width: 100%;
}

/* Round Button */
.btn--round {
  border-radius: var(--radius-full);
  padding-left: var(--space-xl);
  padding-right: var(--space-xl);
}

/* Icon Button */
.btn--icon-only {
  padding: var(--space-sm);
  aspect-ratio: 1;
}

/* Button with Icon */
.btn__icon {
  width: 1.25em;
  height: 1.25em;
  fill: currentColor;
  flex-shrink: 0;
}

/* Loading State */
.btn--loading {
  color: transparent;
  pointer-events: none;
}

.btn--loading::after {
  content: '';
  position: absolute;
  width: 1em;
  height: 1em;
  top: 50%;
  left: 50%;
  margin-left: -0.5em;
  margin-top: -0.5em;
  border: 2px solid var(--color-white);
  border-radius: 50%;
  border-top-color: transparent;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Button Group */
.btn-group {
  display: inline-flex;
  vertical-align: middle;
}

.btn-group > .btn {
  position: relative;
  flex: 0 1 auto;
  border-radius: 0;
}

.btn-group > .btn:first-child {
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}

.btn-group > .btn:last-child {
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

.btn-group > .btn:not(:first-child) {
  margin-left: -2px;
}

.btn-group > .btn:hover,
.btn-group > .btn:focus {
  z-index: 1;
}

/* Responsive Button */
@media (max-width: 767px) {
  .btn--responsive {
    width: 100%;
    display: flex;
  }
}

/* 🔴 A SECOND `.btn--primary` AND `.btn--outline` USED TO LIVE HERE.
 *
 * Deleted by FND-7 / DONI-714. They were labelled "Enhanced Button Styles
 * from Figma" and, being last in the file, silently beat the definitions
 * above them. Three things that block caused, all measured in a browser:
 *
 * | It set | Effect |
 * |---|---|
 * | `color: var(--color-white) !important` on `.btn--primary` | Disabled Filled rendered white-on-steel instead of the CHARCOAL `4015:89` draws |
 * | `padding: 11px 24px` on `.btn--outline` | Top padding 11 where `4005:4927` measures 13 |
 * | `.btn--outline:hover { background: coral; color: white }` | Inverted. `4014:100` keeps the coral label and fills LIGHT MELON |
 *
 * Two definitions of one component is how they drift. There is one now.
 */

/* Size Overrides for Figma Design */
.btn--sm {
  padding: 6px 16px 8px 16px;
  font-size: 14px;
}

.btn--lg {
  padding: 11px 24px 13px 24px;
  font-size: 20px;
}

/* Button Icon */
.btn__icon {
  width: 24px;
  height: 24px;
}

.btn__icon.arrow {
  width: 10px;
  height: 15px;
}

.btn span {
  line-height: 1;
}

.rotate-180 {
  transform: rotate(180deg);
}

@media (min-width: 768px) {
  .btn--primary {
    /* FND-7 / DONI-714: `padding-left: 24px; padding-right: 24px` used to be
       here and it beat the base rule at every desktop width, so Filled
       measured 24 on the right where `4005:4921` draws 16. Removed.

       The sizing pair below is KEPT. It is layout, not the component's own
       geometry, and pages rely on it to stop a button stretching to its
       container. Retiring it belongs to whichever page ticket owns those
       pages, not here. */
    max-width: fit-content;
    width: 100%;
  }
}