@import url("../components/libraries/library-card-action-menu.css");

/* ── Screen reader only ──────────────────────────────────────── */
.ax-sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Palette slot (drop-in zone for swappable palette component) ─ */

.ax-palette-slot {
  display: contents;
}

.ax-toolbar-no-palette .ax-palette-slot,
.ax-toolbar-no-palette .ax-swatch-strip {
  display: none;
}

/* ── Swatch band (full-width strip, sticky mobile/tablet only) ─ */

.ax-swatch-band {
  inline-size: 100%;
  block-size: var(--ax-swatch-band-height);
  outline: var(--ax-swatch-border);
  outline-offset: -1px;
  border-start-start-radius: var(--Corner-radius-corner-radius-200);
  border-start-end-radius: var(--Corner-radius-corner-radius-200);
  border-end-end-radius: 0;
  border-end-start-radius: 0;
  display: none;
  overflow: hidden;
  flex-shrink: 0;
}

.ax-toolbar-sticky .ax-swatch-band {
  display: flex;
}

/* ── Swatch strip (inline, default at all sizes) ─────────────── */

.ax-swatch-strip {
  display: flex;
  inline-size: var(--ax-swatch-strip-width);
  max-inline-size: var(--ax-swatch-strip-width);
  block-size: var(--ax-swatch-strip-height);
  outline: var(--ax-swatch-border);
  outline-offset: -1px;
  border-radius: var(--Corner-radius-corner-radius-100);
  overflow: hidden;
  flex-shrink: 0;
}

.ax-toolbar-sticky .ax-swatch-strip {
  display: none;
}

/* ── Individual swatches ─────────────────────────────────────── */

.ax-swatch {
  flex: 1;
  height: 100%;
}

/* ── Gradient strip variant ──────────────────────────────────── */

.ax-gradient-strip {
  background-size: cover;
}

/* ── Toolbar container (mobile-first, non-sticky base) ───────── */

.ax-toolbar {
  /* ── Scoped vars ── */
  --ax-toolbar-max-width-mobile: 599px;
  --ax-toolbar-min-width: var(--Global-Device-Widths-device-min-width-S);
  --ax-toolbar-max-width-tablet: 1135px;
  --ax-toolbar-presentation-max-width: var(--ax-color-tool-presentation-max-width);
  --ax-toolbar-inline-margin: var(--spacing-300);
  --ax-toolbar-max-width-desktop: calc(var(--ax-toolbar-presentation-max-width) - var(--ax-toolbar-inline-margin) * 2);
  --ax-toolbar-cta-min-width: 108px;
  --ax-toolbar-action-min-width: 300px;
  --ax-swatch-band-height: var(--spacing-400);
  --ax-swatch-border: 1px solid rgba(31, 31, 31, 0.2);
  --ax-swatch-strip-width: 180px;
  --ax-swatch-strip-height: 36px;
  --ax-palette-name-min-width: 60px;
  --ax-palette-name-padding-block: 3px;
  --ax-palette-name-width-desktop: 224px;
  --ax-toolbar-divider-width: 0.5px;
  --ax-toolbar-focus-ring-width: 2px;
  --ax-toolbar-focus-ring-offset: 2px;
  --ax-toolbar-summary-gap-desktop: 10px;
  --ax-toolbar-input-height: var(--spacing-600);
  --ax-toolbar-input-border-radius: 9px;
  --ax-toolbar-floating-bottom-offset: var(--spacing-200);
  --ax-toolbar-row-gap: var(--spacing-200);

  display: flex;
  flex-direction: column;
  inline-size: 100%;
  max-inline-size: var(--ax-toolbar-max-width-mobile);
  min-inline-size: min(var(--ax-toolbar-min-width), 100%);
  margin-block: 0;
  margin-inline: auto;
  background: var(--color-white);
  box-shadow: none;
}

/* Sticky mode overrides — toolbar fills the wrapper which owns the width constraints */
.ax-toolbar.ax-toolbar-sticky {
  max-inline-size: none;
  margin-inline: 0;
  border-start-start-radius: var(--Corner-radius-corner-radius-200);
  border-start-end-radius: var(--Corner-radius-corner-radius-200);
  border-end-end-radius: 0;
  border-end-start-radius: 0;
  box-shadow: var(--Modal-close-shadow-tablet);
  margin-block-end: 0;
  /* Not overflow:hidden — that clipped the download dropdown popover. The
     swatch band clips its own corners; .ax-toolbar-main is transparent below. */
  overflow: visible;
}

/* ── Toolbar main content area ───────────────────────────────── */

.ax-toolbar-main {
  background: var(--color-white);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: var(--ax-toolbar-row-gap);
  column-gap: var(--spacing-200);
  min-inline-size: 0;
}

/* Border-top only when sticky (divides swatch band from content) */
.ax-toolbar-sticky .ax-toolbar-main {
  background: transparent;
  padding-block: var(--spacing-200);
  padding-inline: var(--spacing-300);
  border-block-start: var(--ax-toolbar-divider-width) solid var(--color-gray-300-variant);
}

/* ── Action container ────────────────────────────────────────── */

.ax-action-container {
  display: flex;
  gap: var(--spacing-80);
  align-items: center;
  min-inline-size: min(var(--ax-toolbar-action-min-width), 100%);
  flex: 1;
}

/* ── Palette summary ─────────────────────────────────────────── */

.ax-palette-summary {
  display: flex;
  gap: var(--spacing-80);
  align-items: center;
  flex: 1;
  min-inline-size: 0;
}

/* ── Edit button — opt-in persistent label (showEditLabel) ────── */

.ax-edit-btn--labeled {
  inline-size: auto;
}

.ax-edit-btn-label {
  font-family: var(--body-font-family);
  font-size: var(--ax-body-xs-size);
  font-weight: 700;
  color: var(--color-default-font);
  white-space: nowrap;
}

/* ── Toolbar actions ─────────────────────────────────────────── */

.ax-toolbar-actions {
  display: flex;
  gap: var(--spacing-80);
  align-items: center;
}

/* ── Action button hover/active states (Figma S2 spec) ─────── */

.ax-toolbar sp-action-button[quiet] {
  --mod-actionbutton-background-color-hover: var(--color-light-gray-2);
  --mod-actionbutton-background-color-down: var(--color-gray-300-variant);
  --mod-actionbutton-background-color-focus: var(--color-light-gray-2);
  --mod-actionbutton-border-radius: var(--Corner-radius-corner-radius-100);
  --mod-actionbutton-content-color-hover: var(--color-default-font);
  --mod-actionbutton-content-color-down: var(--color-default-font);
  --mod-actionbutton-content-color-focus: var(--color-default-font);
  cursor: pointer;
}

.ax-toolbar sp-action-button[quiet].ax-drawer-anchor-active {
  --mod-actionbutton-background-color-default: var(--color-light-gray-2);
  --mod-actionbutton-content-color-default: var(--color-default-font);
}

/* ── Palette name field ──────────────────────────────────────── */

.ax-palette-name {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-inline-size: var(--ax-palette-name-min-width);
  block-size: var(--ax-toolbar-input-height);
  background: var(--color-white);
  border: var(--border-width-2) solid var(--color-gray-300-variant);
  border-radius: var(--ax-toolbar-input-border-radius);
  padding-block: var(--ax-palette-name-padding-block);
  padding-inline: var(--spacing-300);
  box-sizing: border-box;
  flex: 0 1 auto;
}

.ax-palette-name:focus-within {
  outline: var(--ax-toolbar-focus-ring-width) solid var(--color-blue-800);
  outline-offset: var(--ax-toolbar-focus-ring-offset);
}

.ax-palette-name-label {
  font-family: var(--body-font-family);
  font-size: var(--ax-body-xxs-size);
  font-style: normal;
  font-weight: var(--ax-body-weight);
  line-height: 16px;
  letter-spacing: 0;
  color: var(--Palette-gray-600);
  min-height: 0;
}

@media (max-width: 599px) {
  .ax-toolbar-standalone .ax-palette-name {
    display: none;
  }
}


.ax-palette-name-input {
  overflow: hidden;
  color: var(--Alias-content-neutral-default);
  text-overflow: ellipsis;
  font-family: var(--body-font-family);
  font-size: var(--ax-body-xs-size);
  font-style: normal;
  font-weight: var(--ax-body-weight);
  line-height: var(--ax-body-xxs-lh);
  letter-spacing: 0;
  background: transparent;
  border: none;
  padding: 0;
  inline-size: 100%;
  outline: none;
  min-height: 0;
}

.ax-palette-name-input::placeholder {
  color: var(--Alias-content-neutral-default);
  font-family: var(--body-font-family);
  font-size: var(--ax-body-xs-size);
  font-style: normal;
  font-weight: var(--ax-body-weight);
  line-height: var(--ax-body-xxs-lh);
  letter-spacing: 0;
}

/* ── CTA button (mobile: full-width wrap) ────────────────────── */

.ax-toolbar-main > sp-button {
  flex: 1 0 100%;
  min-inline-size: var(--ax-toolbar-cta-min-width);
  /* sp-button's own #label is align-self:start, not centered — it relies on
     --mod-button-top-to-text/-bottom-to-text padding summing exactly to the
     button's content height to *look* centered. That sum falls short of this
     button's actual height (a few px short at every breakpoint we use: l-size
     mobile/tablet and desktop alike), and since the label isn't truly
     flex-centered, 100% of that shortfall piles up below the text instead of
     splitting evenly. Recompute both paddings from the button's own live
     height/line-height so the label is exactly centered regardless of
     breakpoint. --spectrum-button-line-height is unitless (e.g. "1.2"); "1em"
     resolves it at the point var() is finally substituted into #label's own
     padding-block-* (see button.js), i.e. against the label's real font-size,
     not sp-button's own --spectrum-button-font-size token (which doesn't
     match #label's rendered size and would throw the math off if used here). */
  --mod-button-top-to-text: calc((var(--spectrum-button-height) - (var(--spectrum-button-line-height) * 1em)) / 2);
  --mod-button-bottom-to-text: var(--mod-button-top-to-text);
}

/* ── Library variant (saved-themes modal toolbar) ──────────────── */

.ax-toolbar.ax-toolbar-library {
  --ax-toolbar-row-gap: var(--spacing-200);

  max-inline-size: none;
  margin-inline: 0;
  box-shadow: none;
}

.ax-toolbar-lib-main {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-200);
  inline-size: 100%;
  min-inline-size: 0;
}

.ax-toolbar-lib-name-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-100);
  inline-size: 100%;
  min-inline-size: 0;
}

.ax-toolbar-lib-name-actions .ax-palette-name {
  flex: 1 1 auto;
  min-inline-size: var(--ax-palette-name-min-width);
}

.ax-toolbar-lib-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-80);
  flex: 0 0 auto;
}

/* Edit theme + Save changes always share a horizontal row (all breakpoints),
   equal width (1fr columns), 40px tall, 12px gap. */
.ax-toolbar-lib-buttons {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--spacing-200);
  inline-size: 100%;
}

.ax-toolbar-lib-buttons sp-button {
  inline-size: 100%;
  --spectrum-button-height: 40px;
}

/* SWC reads --mod-button-* above --spectrum-button-* (which is unresolved in the
   modal), so drive the Edit theme hover fill through the mod token. */
.ax-toolbar-lib-edit {
  --mod-button-background-color-hover: var(--color-light-gray-2);
}

/* Mobile/tablet only: stack Edit theme / Save changes when their labels no
   longer fit the 1fr columns (JS-toggled, see refreshLibraryButtonsStacking),
   instead of letting the button labels wrap and grow taller. Desktop (1200px+)
   is untouched — its own rule below always keeps the buttons content-sized. */
@media (max-width: 1199.98px) {
  .ax-toolbar-lib-buttons--stacked {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }
}

/* ── Desktop (1200px+): name/actions and buttons on a single row ── */
@media (min-width: 1200px) {
  .ax-toolbar-lib-main {
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-300);
    flex-wrap: nowrap;
  }

  .ax-toolbar-lib-name-actions {
    flex: 1 1 auto;
    justify-content: flex-start;
  }

  /* Fixed-width name field on desktop, matching the standard toolbar; the action
     buttons sit immediately after it, left-aligned. */
  .ax-toolbar-lib-name-actions .ax-palette-name {
    inline-size: var(--ax-palette-name-width-desktop);
    flex: 0 0 auto;
  }

  /* Content-sized on desktop; the equal 1fr columns make both buttons match the
     wider label's width. */
  .ax-toolbar-lib-buttons {
    flex: 0 0 auto;
    inline-size: auto;
  }
}

/* ── Sticky host — reserves space in document flow ── */

.ax-toolbar-sticky-host {
  min-block-size: var(--ax-toolbar-h);
}

/* ── Sticky wrapper — always fixed to bottom of viewport ── */

.ax-toolbar-sticky-wrapper {
  --ax-toolbar-sticky-z: 80;
  --ax-toolbar-floating-bottom-offset: 0;
  --ax-toolbar-inline-margin: 0;
  --ax-toolbar-presentation-max-width: var(--ax-color-tool-presentation-max-width);

  position: fixed;
  inline-size: calc(100% - var(--ax-toolbar-inline-margin) * 2);
  max-inline-size: var(--ax-toolbar-presentation-max-width);
  inset-block-end: var(--ax-toolbar-floating-bottom-offset);
  inset-inline-start: 0;
  inset-inline-end: 0;
  margin-inline: auto;
  z-index: var(--ax-toolbar-sticky-z);
  animation: ax-toolbar-slide-in 0.25s ease-out both;
}

.ax-toolbar-sticky-wrapper.ax-toolbar-exiting {
  animation: ax-toolbar-slide-out 0.2s ease-in both;
}

/* Hide toolbar when footer is in view — slides off-screen like floating-cta */
.color-floating-toolbar-container.ax-toolbar-footer-hidden,
.ax-toolbar-sticky-wrapper.ax-toolbar-footer-hidden {
  transform: translateY(130%);
  pointer-events: none;
  transition: transform 0.3s ease-in;
  animation: none;
}

@keyframes ax-toolbar-slide-in {
  from { opacity: 0; transform: translateY(30%); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ax-toolbar-slide-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(30%); }
}

.color-floating-toolbar-container.ax-toolbar-fade-out {
  opacity: 0;
  transition: opacity 0.15s ease-out;
}

.color-floating-toolbar-container.ax-toolbar-fade-in {
  animation: ax-toolbar-fade-in 0.15s ease-out both;
}

@keyframes ax-toolbar-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── Tablet (600px+) ─────────────────────────────────────────── */

@media (min-width: 600px) {
  .ax-toolbar {
    max-inline-size: var(--ax-toolbar-max-width-tablet);
  }

  .ax-toolbar-sticky-wrapper {
    --ax-toolbar-floating-bottom-offset: var(--spacing-200);
    --ax-toolbar-inline-margin: var(--spacing-300);
    inset-block-end: var(--ax-toolbar-floating-bottom-offset);
  }

  .ax-toolbar.ax-toolbar-sticky {
    border-radius: var(--Corner-radius-corner-radius-200);
  }
}

/* ── Desktop (1200px+) ───────────────────────────────────────── */

@media (min-width: 1200px) {
  .ax-toolbar {
    max-inline-size: var(--ax-toolbar-max-width-desktop);
    --ax-toolbar-floating-bottom-offset: var(--spacing-300);
  }

  .ax-toolbar-sticky-wrapper {
    --ax-toolbar-floating-bottom-offset: var(--spacing-300);
    inset-block-end: var(--ax-toolbar-floating-bottom-offset);
  }

  /* Desktop: always hide band, always show strip (even sticky) */
  .ax-toolbar-sticky .ax-swatch-band {
    display: none;
  }

  .ax-toolbar-sticky:not(.ax-toolbar-no-palette) .ax-swatch-strip {
    display: flex;
  }

  /* Desktop: reset sticky to match non-sticky visuals */
  .ax-toolbar.ax-toolbar-sticky {
    border-radius: var(--Corner-radius-corner-radius-200);
    box-shadow: var(--Modal-close-shadow-desktop);
  }

  .ax-toolbar-main {
    flex-wrap: nowrap;
    border-block-start: none;
    row-gap: var(--ax-toolbar-row-gap);
    column-gap: var(--spacing-100);
  }

  .ax-toolbar-sticky .ax-toolbar-main {
    border-block-start: none;
  }

  .ax-action-container {
    display: contents;
  }

  .ax-palette-summary {
    gap: var(--ax-toolbar-summary-gap-desktop);
    flex: 0 0 auto;
    margin-inline-end: auto;
  }

  .ax-palette-name {
    inline-size: var(--ax-palette-name-width-desktop);
    flex: 0 0 auto;
  }

  .ax-toolbar-main > sp-button {
    flex: 0 0 auto;
  }

}

/* ── Widescreen (1681px+) ────────────────────────────────────── */

@media (min-width: 1681px) {
  .ax-toolbar {
    max-inline-size: var(--ax-toolbar-max-width-desktop);
  }
}