/* Copyright (c) 2026 Rogie King. PolyForm Shield 1.0.0. See LICENSE. */
@import url("fig-layer.css");

:root,
:host {
  --icon-24-eyedropper: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.1592 5.65801C16.0376 4.78045 17.4621 4.78055 18.3408 5.65899L18.4951 5.82989C19.1671 6.65442 19.168 7.84476 18.4951 8.66973L18.3408 8.84063L16.6455 10.533C17.1104 11.083 17.1181 11.889 16.6641 12.4461L16.5605 12.5604C16.0111 13.1097 15.1425 13.1428 14.5537 12.6629L14.5342 12.6453L10.0908 17.0916C9.6188 17.5633 8.98876 17.7764 8.375 17.742L7.56055 18.5574C6.97441 19.1432 6.02451 19.1422 5.43945 18.5584V18.5574C4.8538 17.9718 4.85405 17.0221 5.43945 16.4363L6.25586 15.618C6.22412 15.0058 6.44026 14.3794 6.90918 13.91L11.3516 9.46367C10.856 8.87434 10.885 7.99381 11.4395 7.43926L11.5537 7.33574C12.1094 6.88283 12.9136 6.88854 13.4639 7.35137L15.1592 5.65801ZM7.61621 14.617C7.33755 14.8961 7.21782 15.2747 7.25781 15.6385C7.27925 15.8351 7.24419 16.0445 7.10449 16.1844L6.14648 17.1434C5.9516 17.3387 5.95135 17.6553 6.14648 17.8504C6.34167 18.0449 6.65842 18.0451 6.85352 17.8504L7.80859 16.8943C7.94931 16.7536 8.16065 16.7184 8.3584 16.741C8.72329 16.7828 9.10374 16.6643 9.38379 16.3846L13.8223 11.9432L12.0547 10.1756L7.61621 14.617ZM17.6338 6.36602C17.1458 5.87828 16.3544 5.8783 15.8662 6.36602L14.084 8.14629L14.0186 8.20586C13.6767 8.48476 13.1722 8.46484 12.8535 8.14629C12.6583 7.95131 12.3417 7.95119 12.1465 8.14629C11.9514 8.34148 11.9515 8.65808 12.1465 8.85332L15.1465 11.8533C15.3175 12.024 15.5814 12.0451 15.7754 11.9168L15.8535 11.8533C16.0486 11.6582 16.0484 11.3416 15.8535 11.1463V11.1453C15.8524 11.1443 15.8507 11.1434 15.8496 11.1424C15.5128 10.8013 15.514 10.2513 15.8535 9.91192L17.6338 8.1336C18.1216 7.6457 18.1213 6.85425 17.6338 6.36602Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
}

fig-interpolation-swatch {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
  color: var(--figma-color-bordertranslucent);
  overflow: visible;

  &[size="large"] {
    width: 2rem;
    height: 2rem;

    .fig-interpolation-swatch-svg,
    .fig-interpolation-swatch-fill {
      width: 1.25rem;
      height: 1.25rem;
    }
  }

  .fig-interpolation-swatch-svg {
    display: block;
    width: 1rem;
    height: 1rem;
    overflow: visible;
  }

  .fig-interpolation-swatch-fill {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1rem;
    height: 1rem;
    background: linear-gradient(90deg, #ff0000, #4f9eff);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
  }
}

/* Toast */
dialog[is="fig-toast"] {
  --fig-toast-bg-color: var(--figma-color-bg);
  --z-index: 999999;
  contain: none;
  z-index: var(--z-index);
  box-shadow: var(--figma-elevation-100);
  border-radius: var(--radius-large);
  padding: var(--spacer-2) var(--spacer-3);
  align-items: center;
  gap: var(--spacer-2-5);
  height: 2.5rem;
  flex-wrap: nowrap;
  justify-content: center;
  min-width: 0;
  color: var(--figma-color-text);
  background-color: var(--fig-toast-bg-color);

  &[icon]{
    &>fig-icon:first-child {
      margin-inline: calc(var(--spacer-2) * -1);
    }
  }
  &>fig-spinner:first-child {
    margin-inline: calc(var(--spacer-2) * -1);
  }

  /* Generic dialog[open] styling stacks content in a column; toasts stay inline. */
  &[open]:not([open="false"]) {
    display: flex;
    flex-direction: row;
  }

  & p {
    margin: 0;
    padding: 0;
    color: inherit;
    font-weight: var(--body-medium-strong-fontWeight);
  }

  hr[vertical] {
    margin: 0;
  }

  & > fig-separator[data-fig-toast-dismiss-separator] {
    flex: 0 0 auto;
    align-self: stretch;
    margin: 0;
    --fig-separator-color: var(--figma-color-bordertranslucent);
  }
  & fig-button:last-child {
    margin-inline: calc(var(--spacer-2) * -1);
    margin-left: calc(var(--spacer-1) * -1);
  }

  & > fig-icon[data-fig-toast-icon] {
    flex: 0 0 auto;
    --size: var(--spacer-4);
  }

  & > fig-button[data-fig-toast-dismiss] {
    flex: 0 0 auto;
  }

  &[theme="dark"] {
    color-scheme: dark;
  }

  &[theme="light"] {
    color-scheme: light;
  }

  &[theme="danger"] {
    background-color: var(--figma-color-bg-danger);
    color-scheme: dark;
  }

  &[theme="brand"] {
    background-color: var(--figma-color-bg-brand);
    color-scheme: dark;
  }

  &[theme="success"] {
    background-color: var(--figma-color-bg-success);
    color-scheme: dark;
  }
}

/* Fill Picker */
fig-fill-picker {
  display: contents;

  > [slot^="mode-"] {
    display: none;
  }
}

.fig-fill-picker-dialog {
  contain: layout;
  width: 240px;
  padding: 0;

  & > fig-content {
    padding-bottom: var(--spacer-2-5);
    padding-top: var(--spacer-2);
  }

  fig-tab {
    font-size: 0.6875rem;
    padding: var(--spacer-1) var(--spacer-1);
  }

  .fig-fill-picker-close {
    margin-left: auto;
  }

  .fig-fill-picker-tab {
    display: none;

    &:first-child {
      display: block;
    }
  }
  .fig-fill-picker-tab:is([data-tab="solid"], [data-tab="gradient"]) {
    fig-preview {
      overflow: visible;
    }
  }

  .fig-fill-picker-color-area {
    aspect-ratio: 1;
    width: calc(100% - var(--spacer-3) * 2);
    margin: var(--spacer-2) var(--spacer-3);

    > *:not(fig-handle) {
      place-self: center;
      width: 100%;
      height: 100%;
      border-radius: inherit;
    }

    canvas {
      width: 100%;
      height: 100%;
      border-radius: var(--radius-medium);
    }
  }

  .fig-fill-picker-color-area fig-handle {
    z-index: 1;
  }

  .fig-fill-picker-sliders {
    display: grid;
    grid-template-columns: calc(3.5rem + var(--spacer-3)) 1fr;
    grid-template-rows: 1fr 1fr;
    align-items: center;
    padding-right: var(--spacer-3);
    gap: var(--spacer-2);
    padding-bottom: var(--spacer-1);

    .fig-fill-picker-eyedropper {
      grid-column: 1;
      grid-row: 1 / 3;
      place-self: center;
      margin-right: calc(var(--spacer-3) * -1);
      width: 3.5rem;
      aspect-ratio: 1 / 1;
      height: 3.5rem;
    }

    fig-slider {
      grid-column: 2;
      min-width: 0;
    }

    &.is-hue-only {
      grid-template-rows: 1fr;

      .fig-fill-picker-eyedropper {
        grid-row: 1;
        width: auto;
        height: var(--spacer-4);
        aspect-ratio: auto;
      }
    }
  }

  .fig-fill-picker-inputs {
    /* Override labelless 1fr/2fr split so mode select matches eyedropper width
       and color inputs take the remaining row. */
    &:not([direction="vertical"]):not(:has(> label)) {
      grid-template-columns:
        var(--fig-field-left-padding)
        3.5rem
        var(--spacer-2)
        minmax(0, 1fr)
        var(--fig-field-right-padding);
    }

    .fig-fill-picker-input-mode {
      width: 3.5rem;
      flex-shrink: 0;
      align-self: center;
    }

    .fig-fill-picker-input-fields {
      width: 100%;
      min-width: 0;
      display: flex;

      .input-combo {
        flex: 1;
        min-width: 0;

        fig-input-number > input,
        fig-input-text:not(.fig-fill-picker-ci-hex) > input {
          padding-inline: 0;
          text-align: center;
        }
      }

      fig-input-text {
        flex: 1;
        min-width: 0;
      }

      .fig-fill-picker-ci-css {
        font-variant-numeric: tabular-nums;
      }

      .fig-fill-picker-ci-hex-row {
        .fig-fill-picker-ci-hex {
          flex: 1 1 auto;
          min-width: 0;
        }

        .fig-fill-picker-ci-a {
          flex: 0 0 3rem;
        }
      }

      .fig-fill-picker-ci-a {
        flex: 0 0 2.75rem;
        min-width: 2.75rem;
      }
    }
  }

  /* Gradient Tab */
  .fig-fill-picker-gradient-preview {
    aspect-ratio: auto;
    width: calc(100% - var(--spacer-3) * 2);
    margin: var(--spacer-2) var(--spacer-3);
    margin-top: calc(var(--spacer-4) + var(--spacer-1));
    margin-bottom:0;
    background: transparent;
    &::after{
      display: none;
    }
  }

  fig-field.fig-fill-picker-gradient-header {
    display: flex;
    align-items: center;
    grid-template-columns: unset;
    grid-template-areas: unset;
    padding-right: var(--spacer-2);
    padding-left: var(--spacer-3);
    gap: var(--spacer-2);

    > *:not(.fig-field-chevron):not(label) {
      grid-area: unset;
    }

    .fig-fill-picker-gradient-type {
      display: flex;
      flex: 0 1 auto;
      min-width: 0;
      width: auto;
    }

    .fig-fill-picker-gradient-actions {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      gap: var(--spacer-1);
      margin-left: auto;
    }
  }

  .fig-fill-picker-gradient-stops {
    .fig-fill-picker-gradient-stops-header {
      > span {
        flex: 1;
      }
    }
  }

  fig-field.fig-fill-picker-gradient-interpolation-field {
    display: flex;
    align-items: center;
    grid-template-columns: unset;
    grid-template-areas: unset;
    padding-left: var(--spacer-3);
    padding-right: var(--spacer-2);
    gap: var(--spacer-1);

    > *:not(.fig-field-chevron):not(label) {
      grid-area: unset;
    }
  }

  .fig-fill-picker-gradient-interpolation-modes {
    flex: 1 1 auto;
    min-width: 0;

    fig-interpolation-swatch {
      pointer-events: none;
    }
  }

  /* Transparent select trigger sits on the icon button so its menu anchors here. */
  .fig-fill-picker-gradient-interpolation-more {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;

    > fig-button {
      pointer-events: none;
    }

    .fig-fill-picker-gradient-space {
      position: absolute;
      inset: 0;
      width: 100%;
      opacity: 0;
    }

    &:has(.fig-fill-picker-gradient-space:hover) > fig-button,
    &:has(.fig-fill-picker-gradient-space[open]) > fig-button {
      background-color: var(--figma-color-bg-transparent-hover);
    }

    &:has(.fig-fill-picker-gradient-space:focus-within) > fig-button {
      outline: var(--figma-focus-outline);
      outline-offset: var(--figma-focus-outline-offset);
    }
  }

  .fig-fill-picker-gradient-space {
    &::part(prepend) {
      display: none;
    }

    fig-select-option {
      min-height: 3rem;

      &:hover::before,
      &:focus-visible::before {
        background-color: var(--figma-color-bg-tertiary);
      }
    }

    .fig-fill-picker-gradient-interpolation-label {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-width: 0;
      line-height: 1.25;
    }

    .fig-fill-picker-gradient-interpolation-title,
    .fig-fill-picker-gradient-interpolation-subtitle {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .fig-fill-picker-gradient-interpolation-subtitle {
      color: var(--figma-color-text-tertiary);
    }

    fig-select-options.fig-fill-picker-gradient-interpolation-collapsed {
      overflow: hidden;
    }
  }

  .fig-fill-picker-gradient-stops-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacer-1);

    fig-reorder {
      display: contents;
    }
  }

  .fig-fill-picker-gradient-stop-row {
    padding-right: var(--spacer-2);
    display: flex;
    padding-left: var(--spacer-3);
    gap: var(--spacer-2);

    &.dragging {
      background-color: var(--figma-color-bg-selected);
    }

    & > .fig-fill-picker-stop-position {
      flex: 0;
      flex-basis: 3rem;
      min-width: 0;
      width: 3rem;
    }

    .fig-fill-picker-stop-color {
      flex: 1;
      min-width: 0;
      fig-input-text {
        min-width: 0;
      }
    }

    .fig-fill-picker-stop-remove {
      flex-shrink: 0;
    }
  }

  /* Media Tabs (Image/Video/Webcam) */
  fig-field.fig-fill-picker-media-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    grid-template-columns: unset;
    grid-template-areas: unset;
    padding-left: var(--spacer-3);
    padding-right: var(--spacer-2);
    gap: var(--spacer-2);

    > *:not(.fig-field-chevron):not(label) {
      grid-area: unset;
    }

    .fig-fill-picker-scale-mode {
      flex: 0 0 auto;
      width: 4.5rem;
    }

    .fig-fill-picker-scale {
      width: 56px;
      flex: 0 0 auto;
    }

    .fig-fill-picker-media-rotate {
      flex-shrink: 0;
      margin-left: auto;
    }
  }

  .fig-fill-picker-media-preview {
    position: relative;
    width: calc(100% - var(--spacer-3) * 2);
    margin: var(--spacer-2) var(--spacer-3) var(--spacer-1);
    border-radius: var(--radius-medium);

    &.dragover {
      outline: 2px dashed var(--figma-color-border-brand);
      outline-offset: -2px;
    }

    &.has-media {
      /* Replace/upload only — not fig-media-controls play. */
      fig-preview fig-button,
      fig-input-file fig-button {
        visibility: hidden;
      }
      &:hover {
        fig-preview fig-button,
        fig-input-file fig-button {
          visibility: visible;
        }
      }
    }
  }

  /* Image/webcam: square host is fine (no chrome below the preview). */
  fig-image.fig-fill-picker-media-preview {
    aspect-ratio: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .fig-fill-picker-checkerboard {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(
        45deg,
        var(--figma-color-bg-tertiary) 25%,
        transparent 25%
      ),
      linear-gradient(
        -45deg,
        var(--figma-color-bg-tertiary) 25%,
        transparent 25%
      ),
      linear-gradient(
        45deg,
        transparent 75%,
        var(--figma-color-bg-tertiary) 75%
      ),
      linear-gradient(
        -45deg,
        transparent 75%,
        var(--figma-color-bg-tertiary) 75%
      );
    background-size: 16px 16px;
    background-position:
      0 0,
      0 8px,
      8px -8px,
      -8px 0px;
  }

  div.fig-fill-picker-image-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: none;
  }

  fig-image.fig-fill-picker-image-preview {
    max-width: none;
    max-height: none;
    width: auto;
  }

  video.fig-fill-picker-video-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
  }

  /*
   * Video: host must grow for fig-media-controls. Keep the square on the
   * inner fig-preview — aspect-ratio+overflow on the host was clipping
   * the scrubber/play bar at the dialog bottom.
   */
  fig-media.fig-fill-picker-video-preview {
    aspect-ratio: unset;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-width: none;
    max-height: none;
    width: calc(100% - var(--spacer-3) * 2);
    gap: var(--spacer-2);

    > fig-preview {
      aspect-ratio: 1;
      width: 100%;
      max-width: none;
      overflow: hidden;
      border-radius: var(--radius-medium);
    }
  }

  .fig-fill-picker-upload {
    position: relative;
    z-index: 1;
  }

  /* Webcam Tab */
  .fig-fill-picker-webcam-preview {
    position: relative;
    aspect-ratio: 1;
    display: flex;
    width: calc(100% - var(--spacer-3) * 2);
    max-width: none;
    max-height: none;
    margin: 0 var(--spacer-3);
    border-radius: var(--radius-medium);
    overflow: hidden;
    margin: var(--spacer-2) var(--spacer-3);
  }

  .fig-fill-picker-webcam-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .fig-fill-picker-webcam-status {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--figma-color-bg-secondary);
    color: var(--figma-color-text-secondary);
    font-size: 0.75rem;
  }

  .fig-fill-picker-webcam-controls {
    display: flex;
    padding: 0 var(--spacer-3);
    gap: var(--spacer-1);

    .fig-fill-picker-webcam-capture {
      width: 100%;
    }
  }
}


/* Select — host chrome; trigger/listbox live in shadow (options slotted) */
fig-select {
  display: inline-flex;
  position: relative;
  align-items: center;
  min-width: 0;
  height: var(--spacer-4);
  border-radius: var(--radius-medium);
  background-color: var(--figma-color-bg);
  color: var(--figma-color-text);
  box-shadow: inset 0 0 0 1px var(--figma-color-border);

  &[full]:not([full="false"]) {
    display: flex;
    width: 100%;
  }

  &[disabled]:not([disabled="false"]) {
    pointer-events: none;
    color: var(--figma-color-text-tertiary);

    &::after {
      background-color: var(--figma-color-icon-disabled);
    }
  }

  &[variant="ghost"] {
    box-shadow: none;
    background-color: transparent;

    &:hover:not([disabled]):not([disabled="false"]) {
      background-color: var(--figma-color-bg-secondary);
    }
  }

  &::after {
    content: "";
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    mask-image: var(--icon-16-chevron);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    background-color: var(--figma-color-icon);
    pointer-events: none;
    z-index: 1;
  }
}

/*
 * Internal listbox is a fig-popup inside fig-select's shadow, so document
 * dialog[is="fig-popup"] rules don't apply. Expose part=listbox and mirror
 * the menu-theme popup chrome (same tokens as components.css).
 */
fig-select::part(listbox) {
  --z-index: 999999;
  --fig-popup-radius: var(--radius-large);
  --fig-popup-bg-color: var(--figma-color-bg-menu);

  z-index: var(--z-index);
  position: fixed;
  /* Do not set inset here — ::part inset beats inline left/top and
     prevents edge clamping from moving the menu back into view. */
  margin: 0;
  border: 0;
  outline: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--fig-popup-radius);
  background-color: var(--fig-popup-bg-color);
  color: var(--figma-color-text-menu);
  color-scheme: dark;
  box-shadow: var(--figma-elevation-400-menu-panel);
  /* width/min/max set in JS — ::part width rules override element.style. */
  max-height: calc(100vh - 1rem);
  height: max-content;
}

/* Vertical option-panel overflow chrome lives in fig.js (figVerticalOverflowSheet)
   and is adopted on document + fig-menu shadow. */

fig-select-options > :is(fig-separator, fig-menu-separator) {
  /* Align labels with select option text after the checkmark column. */
  &[label]:not([label=""]) {
    --fig-menu-inline-padding: 0 var(--spacer-2) 0 var(--spacer-5);

    &::before {
      margin-inline: unset;
      margin-left: calc(-1 * var(--spacer-5));
      margin-right: calc(-1 * var(--spacer-2));
    }
  }
}

fig-select-option {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
  min-height: var(--spacer-4);
  height: auto;
  padding: var(--spacer-1) var(--spacer-2);
  padding-right: var(--spacer-3);
  border-radius: var(--radius-medium);
  color: var(--figma-color-text-menu);
  cursor: default;
  user-select: none;
  white-space: nowrap;

  h3{
    margin: 0 0 var(--spacer-1) 0;
  }

  &::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0 var(--spacer-2);
    border-radius: var(--radius-medium);
    z-index: -1;
    background-color: transparent;
  }

  &::after {
    content: "";
    display: block;
    flex: 0 0 1rem;
    order: -1;
    width: 1rem;
    height: 1rem;
    margin-left: var(--spacer-1);
    margin-right: var(--spacer-1);
    background-color: currentColor;
    -webkit-mask-image: var(--icon-16-checkmark);
    mask-image: var(--icon-16-checkmark);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    visibility: hidden;
  }

  & > [slot="prepend"] {
    margin-top: calc(var(--spacer-1) * -1);
    margin-bottom: calc(var(--spacer-1) * -1);
    margin-right: var(--spacer-1);
  }


  & > :not([slot="prepend"]):not([slot="append"]) {
    flex: 1 1 auto;
    min-width: 0;
  }

  & > [slot="append"] {
    flex: 0 0 auto;
    margin-inline-start: auto;
    color: var(--figma-color-text-tertiary);
  }

  &:hover,
  &:focus-visible {
    outline: none;

    &::before {
      background-color: var(--figma-color-bg-menu-hover);
    }
  }

  &[selected]:not([selected="false"])::after,
  &[aria-selected="true"]::after {
    visibility: visible;
  }

  &[disabled]:not([disabled="false"]),
  &[aria-disabled="true"] {
    opacity: 0.4;
    pointer-events: none;
  }
}