@layer components {._Container_5e4is_1 {
  position: relative;
  width: var(--circular-progress-size, 28px);
  height: var(--circular-progress-size, 28px);
}

  ._Container_5e4is_1 circle {
    stroke-width: var(--circular-progress-stroke, 2px);
  }._Track_5e4is_9 {
  position: absolute;
  top: 0;
  left: 0;
  stroke: var(--circular-progress-track-color, light-dark(#deede9, var(--green-a50)));
  transition: stroke 0.15s ease;
}._TrackProgress_5e4is_15 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  stroke: var(--circular-progress-track-active-color, var(--green-500));
  stroke-dasharray: 50px;
  stroke-dashoffset: 50px;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transition: stroke-dashoffset 0.3s ease;
  will-change: transform;
}
}
@layer components {._LoadingDots_1iru5_1 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  /* Match line-height of message to avoid reflow when swapped with text */
  height: var(--font-text-md-line-height);
}._Dot_1iru5_8 {
  width: 8px;
  height: 8px;
  border-radius: 100%;
  animation: _pulse_1iru5_1 1s infinite both;
  background-color: currentcolor;
}

  ._Dot_1iru5_8:nth-child(2) {
    animation-delay: 0.2s;
  }

  ._Dot_1iru5_8:nth-child(3) {
    animation-delay: 0.4s;
  }@keyframes _pulse_1iru5_1 {
  0% {
    opacity: 0.15;
  }

  20% {
    opacity: 0.4;
  }

  100% {
    opacity: 0.15;
  }
}
}
@layer components {._LoadingIndicator_7yl6f_1 {
  position: relative;
  width: var(--indicator-size, 1em);
  height: var(--indicator-size, 1em);
  animation: _rotate_7yl6f_1 var(--indicator-rotate-duration, 0.8s) linear infinite;
  transition: opacity 0.15s ease;
}

  ._LoadingIndicator_7yl6f_1::before {
    position: absolute;
    inset: 0;
    display: block;
    border: var(--indicator-stroke, 2px) solid var(--indicator-color, currentcolor);
    border-radius: 50%;
    content: "";
    -webkit-mask-image: conic-gradient(rgb(0 0 0 / 0%), rgb(0 0 0));
            mask-image: conic-gradient(rgb(0 0 0 / 0%), rgb(0 0 0));
  }

  ._LoadingIndicator_7yl6f_1::after {
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    width: var(--indicator-stroke, 2px);
    height: var(--indicator-stroke, 2px);
    border-radius: 100%;
    margin-left: calc(var(--indicator-stroke, 2px) * -1 / 2);
    background-color: var(--indicator-color, currentcolor);
    content: "";
  }@keyframes _rotate_7yl6f_1 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(1turn);
  }
}
}
@layer components {._TransitionGroupChild_1hv1z_1 {
  display: block;
}
}
@layer components {._Button_1864l_1 {
  position: relative;
  display: inline-block;
  gap: var(--button-gap); /* Propagates down to .ButtonInner */
  flex-shrink: 0;
  height: var(--button-size);
  padding: 0 var(--button-gutter);
  border-radius: var(--button-radius);
  cursor: pointer;
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  line-height: 1;
  transition-duration: var(--transition-duration-basic);
  transition-property: opacity, color;
  transition-timing-function: var(--transition-ease-basic);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: nowrap;

  /* =============================================
    Disabled
  ============================================= */
}

  /* Background / shape of the button */
  ._Button_1864l_1::before {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: inherit;
    content: "";
    transition-duration: var(--transition-duration-basic);
    transition-property: opacity, background-color, transform, box-shadow, border-color;
    transition-timing-function: var(--transition-ease-basic);
    /* Composite layer seems required in some cases to avoid visual artifacts. */
    will-change: transform;
  }

  /* Focus ring */
  ._Button_1864l_1::after {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: inherit;
    content: "";
    pointer-events: none;
    transition-duration: var(--transition-duration-basic);
    transition-property: transform;
    transition-timing-function: var(--transition-ease-basic);
    /* Composite layer seems required in some cases to avoid visual artifacts. */
    will-change: transform;
  }

  ._Button_1864l_1:focus {
    outline: none;
  }
    ._Button_1864l_1:focus-visible::after {
      outline: 2px solid var(--button-ring-color, var(--color-ring));
      outline-offset: var(--button-ring-offset, 2px);
    }

  ._Button_1864l_1 svg:where(:not([data-no-autosize])) {
    width: var(--button-icon-size);
    height: var(--button-icon-size);
  }

    :where(._Button_1864l_1 svg:where(:not([data-no-autosize])):first-child:not(:only-child)) {
      margin-left: var(--button-icon-offset, -1px);
    }

    :where(._Button_1864l_1 svg:where(:not([data-no-autosize])):last-child:not(:only-child)) {
      margin-right: var(--button-icon-offset, -1px);
    }

  /* =============================================
    Optical alignment
  ============================================= */
  ._Button_1864l_1:where([data-optically-align="start"]) {
    margin-inline-start: calc(var(--button-gutter) * -1);
  }

  ._Button_1864l_1:where([data-optically-align="end"]) {
    margin-inline-end: calc(var(--button-gutter) * -1);
  }

  /* Uniform buttons zero-out button-gutter, requiring custom calcs */
  ._Button_1864l_1:where([data-optically-align="start"][data-uniform]) {
    margin-inline-start: calc(((var(--button-size) - var(--button-icon-size)) / 2) * -1);
  }

  ._Button_1864l_1:where([data-optically-align="end"][data-uniform]) {
    margin-inline-end: calc(((var(--button-size) - var(--button-icon-size)) / 2) * -1);
  }

  /* =============================================
    Sizes
  ============================================= */
  ._Button_1864l_1:where([data-size="3xs"]) {
    --button-size: var(--control-size-3xs);
    --button-gutter: var(--control-gutter-2xs);
    --button-font-size: var(--control-font-size-sm);
    --button-icon-size: var(--control-icon-size-xs);
    --button-gap: var(--button-gap-sm);
    --button-radius: var(--control-radius-sm);
    --button-icon-offset: -1px;
    --indicator-size: 11px;
    --circular-progress-size: 11px;
  }

  ._Button_1864l_1:where([data-size="2xs"]) {
    --button-size: var(--control-size-2xs);
    --button-gutter: var(--control-gutter-xs);
    --button-font-size: var(--control-font-size-sm);
    --button-icon-size: var(--control-icon-size-sm);
    --button-gap: var(--button-gap-md);
    --button-radius: var(--control-radius-sm);
    --button-icon-offset: -1px;
    --indicator-size: 12px;
    --circular-progress-size: 12px;
  }

  ._Button_1864l_1:where([data-size="xs"]) {
    --button-size: var(--control-size-xs);
    --button-gutter: var(--control-gutter-xs);
    --button-font-size: var(--control-font-size-md);
    --button-icon-size: var(--control-icon-size-sm);
    --button-gap: var(--button-gap-md);
    --button-radius: var(--control-radius-sm);
    --button-icon-offset: -1px;
    --indicator-size: 13px;
    --circular-progress-size: 14px;
  }

  ._Button_1864l_1:where([data-size="sm"]) {
    --button-size: var(--control-size-sm);
    --button-gutter: var(--control-gutter-sm);
    --button-font-size: var(--control-font-size-md);
    --button-icon-size: var(--control-icon-size-md);
    --button-gap: var(--button-gap-md);
    --button-radius: var(--control-radius-sm);
    --button-icon-offset: -1px;
    --indicator-size: 15px;
    --circular-progress-size: 15px;
  }

  ._Button_1864l_1:where([data-size="md"]) {
    --button-size: var(--control-size-md);
    --button-gutter: var(--control-gutter-md);
    --button-font-size: var(--control-font-size-md);
    --button-icon-size: var(--control-icon-size-md);
    --button-gap: var(--button-gap-lg);
    --button-radius: var(--control-radius-md);
    --button-icon-offset: -1px;
    --indicator-size: 16px;
    --circular-progress-size: 16px;
  }

  ._Button_1864l_1:where([data-size="lg"]) {
    --button-size: var(--control-size-lg);
    --button-gutter: var(--control-gutter-md);
    --button-font-size: var(--control-font-size-md);
    --button-icon-size: var(--control-icon-size-md);
    --button-gap: var(--button-gap-lg);
    --button-radius: var(--control-radius-md);
    --button-icon-offset: -1px;
    --indicator-size: 16px;
    --circular-progress-size: 16px;
  }

  ._Button_1864l_1:where([data-size="xl"]) {
    --button-size: var(--control-size-xl);
    --button-gutter: var(--control-gutter-lg);
    --button-font-size: var(--control-font-size-md);
    --button-icon-size: var(--control-icon-size-md);
    --button-gap: var(--button-gap-lg);
    --button-radius: var(--control-radius-lg);
    --button-icon-offset: -1px;
    --indicator-size: 18px;
    --circular-progress-size: 18px;
  }

  ._Button_1864l_1:where([data-size="2xl"]) {
    --button-size: var(--control-size-2xl);
    --button-gutter: var(--control-gutter-lg);
    --button-font-size: var(--control-font-size-lg);
    --button-icon-size: var(--control-icon-size-lg);
    --button-gap: var(--button-gap-lg);
    --button-radius: var(--control-radius-xl);
    --button-icon-offset: -2px;
    --indicator-size: 18px;
    --circular-progress-size: 18px;
  }

  ._Button_1864l_1:where([data-size="3xl"]) {
    --button-size: var(--control-size-3xl);
    --button-gutter: var(--control-gutter-xl);
    --button-font-size: var(--control-font-size-lg);
    --button-icon-size: var(--control-icon-size-lg);
    --button-gap: var(--button-gap-lg);
    --button-radius: var(--control-radius-xl);
    --button-icon-offset: -2px;
    --indicator-size: 20px;
    --circular-progress-size: 20px;
  }

  /* =============================================
    Gutter sizes
  ============================================= */
  ._Button_1864l_1:where([data-gutter-size="2xs"]) {
    --button-gutter: var(--control-gutter-2xs);
  }

  ._Button_1864l_1:where([data-gutter-size="xs"]) {
    --button-gutter: var(--control-gutter-xs);
  }

  ._Button_1864l_1:where([data-gutter-size="sm"]) {
    --button-gutter: var(--control-gutter-sm);
  }

  ._Button_1864l_1:where([data-gutter-size="md"]) {
    --button-gutter: var(--control-gutter-md);
  }

  ._Button_1864l_1:where([data-gutter-size="lg"]) {
    --button-gutter: var(--control-gutter-lg);
  }

  ._Button_1864l_1:where([data-gutter-size="xl"]) {
    --button-gutter: var(--control-gutter-xl);
  }

  /* =============================================
    Icon sizes
  ============================================= */
  ._Button_1864l_1:where([data-icon-size="sm"]) {
    --button-icon-size: var(--control-icon-size-sm);
  }

  ._Button_1864l_1:where([data-icon-size="md"]) {
    --button-icon-size: var(--control-icon-size-md);
  }

  ._Button_1864l_1:where([data-icon-size="lg"]) {
    --button-icon-size: var(--control-icon-size-lg);
  }

  ._Button_1864l_1:where([data-icon-size="xl"]) {
    --button-icon-size: var(--control-icon-size-xl);
  }

  ._Button_1864l_1:where([data-icon-size="2xl"]) {
    --button-icon-size: var(--control-icon-size-2xl);
  }

  /* =============================================
    Pill
  ============================================= */
  ._Button_1864l_1:where([data-pill]) {
    --button-radius: var(--radius-full);

    padding: 0 calc(var(--button-gutter) * var(--control-gutter-pill-scaling));
  }

  /* =============================================
    Block
  ============================================= */
  ._Button_1864l_1:where([data-block]) {
    width: 100%;
  }

  /* =============================================
    Uniform
  ============================================= */
  ._Button_1864l_1[data-uniform] {
    --button-gutter: 0;

    width: var(--button-size);
  }

  /* =============================================
    Ghost variant
  ============================================= */
  ._Button_1864l_1[data-variant="ghost"] {
    --button-ring-offset: -1px;

    color: var(--button-text-color);
  }

    ._Button_1864l_1[data-variant="ghost"]::before {
      background-color: var(--button-background-color);
      opacity: 0;
      transform: scale(var(--scale));
    }

    ._Button_1864l_1[data-variant="ghost"][aria-expanded="true"],
    ._Button_1864l_1[data-variant="ghost"][data-state="open"] {
      color: var(--button-text-color-hover);
    }

      ._Button_1864l_1[data-variant="ghost"][aria-expanded="true"]::before, ._Button_1864l_1[data-variant="ghost"][data-state="open"]::before {
        /* Slightly deemphasize */
        opacity: 0.6;
        transform: scale(1);
      }

    ._Button_1864l_1[data-variant="ghost"][data-selected] {
      color: var(--button-text-color-hover);
    }

      ._Button_1864l_1[data-variant="ghost"][data-selected]::before {
        opacity: 1;
        transform: scale(1);
      }
      @media (hover: hover) and (pointer: fine) {._Button_1864l_1[data-variant="ghost"]:where(:not([data-disabled])):hover {
        color: var(--button-text-color-hover);
}

        ._Button_1864l_1[data-variant="ghost"]:where(:not([data-disabled])):hover::before {
          opacity: 1;
          transform: scale(1);
        }
}
        ._Button_1864l_1[data-variant="ghost"]:where(:not([data-disabled])):active::before {
          background-color: var(--button-background-color-active);
          opacity: 1;
          transform: scale(var(--scale));
        }

        ._Button_1864l_1[data-variant="ghost"]:where(:not([data-disabled])):active::after {
          transform: scale(var(--scale));
        }

    ._Button_1864l_1[data-variant="ghost"]:where([data-color="primary"]) {
      --button-background-color: var(--color-background-primary-ghost-hover);
      --button-background-color-active: var(--color-background-primary-ghost-active);
      --button-text-color: var(--color-text-primary-ghost);
      --button-text-color-hover: var(--color-text-primary-ghost-hover);
      --button-ring-color: var(--color-ring-primary-ghost);
    }

    ._Button_1864l_1[data-variant="ghost"]:where([data-color="secondary"]) {
      --button-background-color: var(--color-background-secondary-ghost-hover);
      --button-background-color-active: var(--color-background-secondary-ghost-active);
      --button-text-color: var(--color-text-secondary-ghost);
      --button-text-color-hover: var(--color-text-secondary-ghost-hover);
      --button-ring-color: var(--color-ring-secondary-ghost);
    }

    ._Button_1864l_1[data-variant="ghost"]:where([data-color="danger"]) {
      --button-background-color: var(--color-background-danger-ghost-hover);
      --button-background-color-active: var(--color-background-danger-ghost-active);
      --button-text-color: var(--color-text-danger-ghost);
      --button-text-color-hover: var(--color-text-danger-ghost-hover);
      --button-ring-color: var(--color-ring-danger-ghost);
    }

    ._Button_1864l_1[data-variant="ghost"]:where([data-color="success"]) {
      --button-background-color: var(--color-background-success-ghost-hover);
      --button-background-color-active: var(--color-background-success-ghost-active);
      --button-text-color: var(--color-text-success-ghost);
      --button-text-color-hover: var(--color-text-success-ghost-hover);
      --button-ring-color: var(--color-ring-success-ghost);
    }

    ._Button_1864l_1[data-variant="ghost"]:where([data-color="warning"]) {
      --button-background-color: var(--color-background-warning-ghost-hover);
      --button-background-color-active: var(--color-background-warning-ghost-active);
      --button-text-color: var(--color-text-warning-ghost);
      --button-text-color-hover: var(--color-text-warning-ghost-hover);
      --button-ring-color: var(--color-ring-warning-ghost);
    }

    ._Button_1864l_1[data-variant="ghost"]:where([data-color="caution"]) {
      --button-background-color: var(--color-background-caution-ghost-hover);
      --button-background-color-active: var(--color-background-caution-ghost-active);
      --button-text-color: var(--color-text-caution-ghost);
      --button-text-color-hover: var(--color-text-caution-ghost-hover);
      --button-ring-color: var(--color-ring-caution-ghost);
    }

    ._Button_1864l_1[data-variant="ghost"]:where([data-color="info"]) {
      --button-background-color: var(--color-background-info-ghost-hover);
      --button-background-color-active: var(--color-background-info-ghost-active);
      --button-text-color: var(--color-text-info-ghost);
      --button-text-color-hover: var(--color-text-info-ghost-hover);
      --button-ring-color: var(--color-ring-info-ghost);
    }

    ._Button_1864l_1[data-variant="ghost"]:where([data-color="discovery"]) {
      --button-background-color: var(--color-background-discovery-ghost-hover);
      --button-background-color-active: var(--color-background-discovery-ghost-active);
      --button-text-color: var(--color-text-discovery-ghost);
      --button-text-color-hover: var(--color-text-discovery-ghost-hover);
      --button-ring-color: var(--color-ring-discovery-ghost);
    }

  /* =============================================
    Solid variant
  ============================================= */
  ._Button_1864l_1[data-variant="solid"] {
    color: var(--button-text-color);
  }

    ._Button_1864l_1[data-variant="solid"]::before {
      background-color: var(--button-background-color);
    }
      ._Button_1864l_1[data-variant="solid"][aria-expanded="true"]::before, ._Button_1864l_1[data-variant="solid"][data-state="open"]::before, ._Button_1864l_1[data-variant="solid"][data-selected]::before {
        background-color: var(--button-background-color-hover);
      }
      @media (hover: hover) and (pointer: fine) {
        ._Button_1864l_1[data-variant="solid"]:where(:not([data-disabled])):hover::before {
          background-color: var(--button-background-color-hover);
        }
}
        ._Button_1864l_1[data-variant="solid"]:where(:not([data-disabled])):active::before {
          background-color: var(--button-background-color-active);
        }

        ._Button_1864l_1[data-variant="solid"]:where(:not([data-disabled])):active::before,
        ._Button_1864l_1[data-variant="solid"]:where(:not([data-disabled])):active::after {
          transform: scale(var(--scale));
        }

    ._Button_1864l_1[data-variant="solid"]:where([data-color="primary"]) {
      --button-background-color: var(--color-background-primary-solid);
      --button-background-color-hover: var(--color-background-primary-solid-hover);
      --button-background-color-active: var(--color-background-primary-solid-active);
      --button-text-color: var(--color-text-primary-solid);
      --button-ring-color: var(--color-ring-primary-solid);
    }

    ._Button_1864l_1[data-variant="solid"]:where([data-color="secondary"]) {
      --button-background-color: var(--color-background-secondary-solid);
      --button-background-color-hover: var(--color-background-secondary-solid-hover);
      --button-background-color-active: var(--color-background-secondary-solid-active);
      --button-text-color: var(--color-text-secondary-solid);
      --button-ring-color: var(--color-ring-secondary-solid);
    }

    ._Button_1864l_1[data-variant="solid"]:where([data-color="success"]) {
      --button-background-color: var(--color-background-success-solid);
      --button-background-color-hover: var(--color-background-success-solid-hover);
      --button-background-color-active: var(--color-background-success-solid-active);
      --button-text-color: var(--color-text-success-solid);
      --button-ring-color: var(--color-ring-success-solid);
    }

    ._Button_1864l_1[data-variant="solid"]:where([data-color="danger"]) {
      --button-background-color: var(--color-background-danger-solid);
      --button-background-color-hover: var(--color-background-danger-solid-hover);
      --button-background-color-active: var(--color-background-danger-solid-active);
      --button-text-color: var(--color-text-danger-solid);
      --button-ring-color: var(--color-ring-danger-solid);
    }

    ._Button_1864l_1[data-variant="solid"]:where([data-color="warning"]) {
      --button-background-color: var(--color-background-warning-solid);
      --button-background-color-hover: var(--color-background-warning-solid-hover);
      --button-background-color-active: var(--color-background-warning-solid-active);
      --button-text-color: var(--color-text-warning-solid);
      --button-ring-color: var(--color-ring-warning-solid);
    }

    ._Button_1864l_1[data-variant="solid"]:where([data-color="caution"]) {
      --button-background-color: var(--color-background-caution-solid);
      --button-background-color-hover: var(--color-background-caution-solid-hover);
      --button-background-color-active: var(--color-background-caution-solid-active);
      --button-text-color: var(--color-text-caution-solid);
      --button-ring-color: var(--color-ring-caution-solid);
    }

    ._Button_1864l_1[data-variant="solid"]:where([data-color="info"]) {
      --button-background-color: var(--color-background-info-solid);
      --button-background-color-hover: var(--color-background-info-solid-hover);
      --button-background-color-active: var(--color-background-info-solid-active);
      --button-text-color: var(--color-text-info-solid);
      --button-ring-color: var(--color-ring-info-solid);
    }

    ._Button_1864l_1[data-variant="solid"]:where([data-color="discovery"]) {
      --button-background-color: var(--color-background-discovery-solid);
      --button-background-color-hover: var(--color-background-discovery-solid-hover);
      --button-background-color-active: var(--color-background-discovery-solid-active);
      --button-text-color: var(--color-text-discovery-solid);
      --button-ring-color: var(--color-ring-discovery-solid);
    }

  /* =============================================
    Soft variant
  ============================================= */
  ._Button_1864l_1[data-variant="soft"] {
    color: var(--button-text-color);
  }

    ._Button_1864l_1[data-variant="soft"]::before {
      background-color: var(--button-background-color);
    }
      ._Button_1864l_1[data-variant="soft"][aria-expanded="true"]::before, ._Button_1864l_1[data-variant="soft"][data-state="open"]::before, ._Button_1864l_1[data-variant="soft"][data-selected]::before {
        background-color: var(--button-background-color-hover);
      }
      @media (hover: hover) and (pointer: fine) {
        ._Button_1864l_1[data-variant="soft"]:where(:not([data-disabled])):hover::before {
          background-color: var(--button-background-color-hover);
        }
}
        ._Button_1864l_1[data-variant="soft"]:where(:not([data-disabled])):active::before {
          background-color: var(--button-background-color-active);
        }

        ._Button_1864l_1[data-variant="soft"]:where(:not([data-disabled])):active::before,
        ._Button_1864l_1[data-variant="soft"]:where(:not([data-disabled])):active::after {
          transform: scale(var(--scale));
        }

    ._Button_1864l_1[data-variant="soft"]:where([data-color="primary"]) {
      --button-background-color: var(--color-background-primary-soft-alpha);
      --button-background-color-hover: var(--color-background-primary-soft-alpha-hover);
      --button-background-color-active: var(--color-background-primary-soft-alpha-active);
      --button-text-color: var(--color-text-primary-soft);
      --button-ring-color: var(--color-ring-primary-soft);
    }

    ._Button_1864l_1[data-variant="soft"]:where([data-color="secondary"]) {
      --button-background-color: var(--color-background-secondary-soft-alpha);
      --button-background-color-hover: var(--color-background-secondary-soft-alpha-hover);
      --button-background-color-active: var(--color-background-secondary-soft-alpha-active);
      --button-text-color: var(--color-text-secondary-soft);
      --button-ring-color: var(--color-ring-secondary-soft);
    }

    ._Button_1864l_1[data-variant="soft"]:where([data-color="success"]) {
      --button-background-color: var(--color-background-success-soft-alpha);
      --button-background-color-hover: var(--color-background-success-soft-alpha-hover);
      --button-background-color-active: var(--color-background-success-soft-alpha-active);
      --button-text-color: var(--color-text-success-soft);
      --button-ring-color: var(--color-ring-success-soft);
    }

    ._Button_1864l_1[data-variant="soft"]:where([data-color="danger"]) {
      --button-background-color: var(--color-background-danger-soft-alpha);
      --button-background-color-hover: var(--color-background-danger-soft-alpha-hover);
      --button-background-color-active: var(--color-background-danger-soft-alpha-active);
      --button-text-color: var(--color-text-danger-soft);
      --button-ring-color: var(--color-ring-danger-soft);
    }

    ._Button_1864l_1[data-variant="soft"]:where([data-color="warning"]) {
      --button-background-color: var(--color-background-warning-soft-alpha);
      --button-background-color-hover: var(--color-background-warning-soft-alpha-hover);
      --button-background-color-active: var(--color-background-warning-soft-alpha-active);
      --button-text-color: var(--color-text-warning-soft);
      --button-ring-color: var(--color-ring-warning-soft);
    }

    ._Button_1864l_1[data-variant="soft"]:where([data-color="caution"]) {
      --button-background-color: var(--color-background-caution-soft-alpha);
      --button-background-color-hover: var(--color-background-caution-soft-alpha-hover);
      --button-background-color-active: var(--color-background-caution-soft-alpha-active);
      --button-text-color: var(--color-text-caution-soft);
      --button-ring-color: var(--color-ring-caution-soft);
    }

    ._Button_1864l_1[data-variant="soft"]:where([data-color="info"]) {
      --button-background-color: var(--color-background-info-soft-alpha);
      --button-background-color-hover: var(--color-background-info-soft-alpha-hover);
      --button-background-color-active: var(--color-background-info-soft-alpha-active);
      --button-text-color: var(--color-text-info-soft);
      --button-ring-color: var(--color-ring-info-soft);
    }

    ._Button_1864l_1[data-variant="soft"]:where([data-color="discovery"]) {
      --button-background-color: var(--color-background-discovery-soft-alpha);
      --button-background-color-hover: var(--color-background-discovery-soft-alpha-hover);
      --button-background-color-active: var(--color-background-discovery-soft-alpha-active);
      --button-text-color: var(--color-text-discovery-soft);
      --button-ring-color: var(--color-ring-discovery-soft);
    }

  /* =============================================
    Outline variant
  ============================================= */
  ._Button_1864l_1[data-variant="outline"] {
    --button-ring-offset: -1px;

    color: var(--button-text-color);
  }

    ._Button_1864l_1[data-variant="outline"]::before {
      background-color: transparent;
      box-shadow:
        0 0 0 1px var(--button-border-color) inset,
        var(--button-shadow-custom, 0 0 #00000000);
    }

    ._Button_1864l_1[data-variant="outline"][aria-expanded="true"],
    ._Button_1864l_1[data-variant="outline"][data-state="open"],
    ._Button_1864l_1[data-variant="outline"][data-selected] {
      color: var(--button-text-color-hover);
    }

      ._Button_1864l_1[data-variant="outline"][aria-expanded="true"]::before, ._Button_1864l_1[data-variant="outline"][data-state="open"]::before, ._Button_1864l_1[data-variant="outline"][data-selected]::before {
        background-color: var(--button-background-color-hover);
        box-shadow:
          0 0 0 1px var(--button-border-color-hover) inset,
          var(--button-shadow-custom, 0 0 #00000000);
      }
      @media (hover: hover) and (pointer: fine) {._Button_1864l_1[data-variant="outline"]:where(:not([data-disabled])):hover {
        color: var(--button-text-color-hover);
}

        ._Button_1864l_1[data-variant="outline"]:where(:not([data-disabled])):hover::before {
          background-color: var(--button-background-color-hover);
          box-shadow:
            0 0 0 1px var(--button-border-color-hover) inset,
            var(--button-shadow-custom, 0 0 #00000000);
        }
}
        ._Button_1864l_1[data-variant="outline"]:where(:not([data-disabled])):active::before {
          background-color: var(--button-background-color-active);
          transform: scale(var(--scale));
        }

        ._Button_1864l_1[data-variant="outline"]:where(:not([data-disabled])):active::after {
          transform: scale(var(--scale));
        }

    ._Button_1864l_1[data-variant="outline"]:where([data-color="primary"]) {
      --button-background-color-hover: var(--color-background-primary-outline-hover);
      --button-background-color-active: var(--color-background-primary-outline-active);
      --button-border-color: var(--color-border-primary-outline);
      --button-border-color-hover: var(--color-border-primary-outline-hover);
      --button-text-color: var(--color-text-primary-outline);
      --button-text-color-hover: var(--color-text-primary-outline-hover);
      --button-ring-color: var(--color-ring-primary-outline);
    }

    ._Button_1864l_1[data-variant="outline"]:where([data-color="secondary"]) {
      --button-background-color-hover: var(--color-background-secondary-outline-hover);
      --button-background-color-active: var(--color-background-secondary-outline-active);
      --button-border-color: var(--color-border-secondary-outline);
      --button-border-color-hover: var(--color-border-secondary-outline-hover);
      --button-text-color: var(--color-text-secondary-outline);
      --button-text-color-hover: var(--color-text-secondary-outline-hover);
      --button-ring-color: var(--color-ring-secondary-outline);
    }

    ._Button_1864l_1[data-variant="outline"]:where([data-color="danger"]) {
      --button-background-color-hover: var(--color-background-danger-outline-hover);
      --button-background-color-active: var(--color-background-danger-outline-active);
      --button-border-color: var(--color-border-danger-outline);
      --button-border-color-hover: var(--color-border-danger-outline-hover);
      --button-text-color: var(--color-text-danger-outline);
      --button-text-color-hover: var(--color-text-danger-outline-hover);
      --button-ring-color: var(--color-ring-danger-outline);
    }

    ._Button_1864l_1[data-variant="outline"]:where([data-color="success"]) {
      --button-background-color-hover: var(--color-background-success-outline-hover);
      --button-background-color-active: var(--color-background-success-outline-active);
      --button-border-color: var(--color-border-success-outline);
      --button-border-color-hover: var(--color-border-success-outline-hover);
      --button-text-color: var(--color-text-success-outline);
      --button-text-color-hover: var(--color-text-success-outline-hover);
      --button-ring-color: var(--color-ring-success-outline);
    }

    ._Button_1864l_1[data-variant="outline"]:where([data-color="warning"]) {
      --button-background-color-hover: var(--color-background-warning-outline-hover);
      --button-background-color-active: var(--color-background-warning-outline-active);
      --button-border-color: var(--color-border-warning-outline);
      --button-border-color-hover: var(--color-border-warning-outline-hover);
      --button-text-color: var(--color-text-warning-outline);
      --button-text-color-hover: var(--color-text-warning-outline-hover);
      --button-ring-color: var(--color-ring-warning-outline);
    }

    ._Button_1864l_1[data-variant="outline"]:where([data-color="caution"]) {
      --button-background-color-hover: var(--color-background-caution-outline-hover);
      --button-background-color-active: var(--color-background-caution-outline-active);
      --button-border-color: var(--color-border-caution-outline);
      --button-border-color-hover: var(--color-border-caution-outline-hover);
      --button-text-color: var(--color-text-caution-outline);
      --button-text-color-hover: var(--color-text-caution-outline-hover);
      --button-ring-color: var(--color-ring-caution-outline);
    }

    ._Button_1864l_1[data-variant="outline"]:where([data-color="info"]) {
      --button-background-color-hover: var(--color-background-info-outline-hover);
      --button-background-color-active: var(--color-background-info-outline-active);
      --button-border-color: var(--color-border-info-outline);
      --button-border-color-hover: var(--color-border-info-outline-hover);
      --button-text-color: var(--color-text-info-outline);
      --button-text-color-hover: var(--color-text-info-outline-hover);
      --button-ring-color: var(--color-ring-info-outline);
    }

    ._Button_1864l_1[data-variant="outline"]:where([data-color="discovery"]) {
      --button-background-color-hover: var(--color-background-discovery-outline-hover);
      --button-background-color-active: var(--color-background-discovery-outline-active);
      --button-border-color: var(--color-border-discovery-outline);
      --button-border-color-hover: var(--color-border-discovery-outline-hover);
      --button-text-color: var(--color-text-discovery-outline);
      --button-text-color-hover: var(--color-text-discovery-outline-hover);
      --button-ring-color: var(--color-ring-discovery-outline);
    }
  /* Non-visual disablement, akin to `inert` */
  ._Button_1864l_1[disabled] {
    pointer-events: none;
  }

  /* Visual disablement */
  ._Button_1864l_1[data-disabled][data-variant] {
    --button-background-color: var(--color-background-disabled);
    --button-border-color: var(--color-border-disabled);
    --button-text-color: var(--color-text-disabled);

    cursor: not-allowed;
    pointer-events: auto;
  }

    /* Don't press while disabled */
    ._Button_1864l_1[data-disabled][data-variant]:active::before {
      transform: scale(1);
    }

    /* Relaxed disabled tone: keep disabled visuals, soften cursor */
    ._Button_1864l_1[data-disabled][data-variant][data-disabled-tone="relaxed"] {
      cursor: default;
    }._ButtonInner_1864l_4 {
  position: relative;
  display: flex;
  /* Allows overrides through className on .Button */
  flex-direction: inherit;
  align-items: center;
  justify-content: center;
  /* Allows overrides through className on .Button */
  gap: inherit;
  width: 100%;
  /* Prevent padding-bottom from creating excess height (flexbox) */
  height: 100%;
  transition: opacity 0.15s ease 0.1s;
}

  [data-loading] ._ButtonInner_1864l_4 {
    opacity: 0;
    transition: opacity 0.3s ease;
  }._ButtonLoader_1864l_749 {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

  ._ButtonLoader_1864l_749[data-entering] {
    opacity: 0;
  }

  ._ButtonLoader_1864l_749[data-exiting] {
    opacity: 1;
  }

  ._ButtonLoader_1864l_749[data-entering-active],
  ._ButtonLoader_1864l_749[data-entering][data-interrupted] {
    opacity: 1;
    transition: opacity 0.15s ease 0.1s;
  }

  ._ButtonLoader_1864l_749[data-exiting-active],
  ._ButtonLoader_1864l_749[data-exiting][data-interrupted] {
    opacity: 0;
    transition: opacity 0.15s ease;
  }/* .Kbd {
  display: none;

  @mixin breakpoint md {
    display: block;
    padding: 1px 3px;
    border: 1px solid var(--kbd-border-color, transparent);
    border-radius: 4px;
    margin: 0 -2px 0 4px;
    background: var(--kbd-bg, var(--alpha-10));
    color: var(--kbd-color, inherit);
    font-family:
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      Oxygen,
      Ubuntu,
      Cantarell,
      "Open Sans",
      "Helvetica Neue",
      sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    transition:
      border-color 0.15s ease,
      background-color 0.15s ease,
      color 0.15s ease;

    [data-size="2xs"] & {
      margin-right: 0;
      margin-left: 3px;
      font-size: 12px;
    }

    [data-size="xs"] & {
      font-size: 12px;
    }

    [data-size="sm"] & {
      margin-right: -1px;
    }

    [data-size="xl"] & {
      padding: 2px 3px;
      font-size: 14px;
    }

    [data-pill] & {
      border-radius: 8px;
      margin-right: -5px;
    }

    [data-size="2xs"][data-pill] & {
      margin-right: -4px;
    }
  }
} */
}
@layer components {._TransitionItem_1o7b1_1 {
  will-change: var(--tg-will-change);

  /* Removing natural DOM position allows multiple layers to occupy the same space without stacking */

  /* Interruptions should not experience delay */
}
  [data-transition-position="absolute"] ._TransitionItem_1o7b1_1[data-exiting],
  
  [data-transition-position="absolute"] ._TransitionItem_1o7b1_1:not([data-exiting]) + ._TransitionItem_1o7b1_1[data-entering] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }

  ._TransitionItem_1o7b1_1[data-entering] {
    filter: var(--tg-initial-filter);
    opacity: var(--tg-initial-opacity);
    transform: var(--tg-initial-transform);
  }

  ._TransitionItem_1o7b1_1[data-exiting] {
    filter: var(--tg-enter-filter);
    opacity: var(--tg-enter-opacity);
    transform: var(--tg-enter-transform);
  }

  ._TransitionItem_1o7b1_1[data-entering-active],
  ._TransitionItem_1o7b1_1[data-entering][data-interrupted] {
    filter: var(--tg-enter-filter);
    opacity: var(--tg-enter-opacity);
    transform: var(--tg-enter-transform);
    transition:
      opacity var(--tg-enter-duration) var(--tg-enter-timing-function) var(--tg-enter-delay),
      transform var(--tg-enter-duration) var(--tg-enter-timing-function) var(--tg-enter-delay),
      filter var(--tg-enter-duration) var(--tg-enter-timing-function) var(--tg-enter-delay);
  }

  ._TransitionItem_1o7b1_1[data-exiting-active],
  ._TransitionItem_1o7b1_1[data-exiting][data-interrupted] {
    filter: var(--tg-exit-filter, none);
    opacity: var(--tg-exit-opacity, 0);
    transform: var(--tg-exit-transform, none);
    transition:
      opacity var(--tg-exit-duration) var(--tg-exit-timing-function) var(--tg-exit-delay),
      transform var(--tg-exit-duration) var(--tg-exit-timing-function) var(--tg-exit-delay),
      filter var(--tg-exit-duration) var(--tg-exit-timing-function) var(--tg-exit-delay);
  }
  ._TransitionItem_1o7b1_1[data-entering][data-interrupted],
  ._TransitionItem_1o7b1_1[data-exiting][data-interrupted] {
    transition-delay: 0ms;
  }
}
@layer components {._Layout_cd3zg_1 {
  position: relative;
  display: block;
  flex-shrink: 0;
  transition-property: height, width;

  /* The container is considered to have three directional states by the latest action: */
  /* - "in": (default) a new child entered with no other siblings present */
}

  ._Layout_cd3zg_1[data-clip="true"] {
    overflow: hidden;
  }
  /* - "move": a new child entered while another sibling was present */
  ._Layout_cd3zg_1[data-direction="in"] {
    transition-delay: var(--tg-layout-enter-delay);
    transition-duration: var(--tg-layout-enter-duration);
    transition-timing-function: var(--tg-layout-enter-timing-function);
  }
  /* - "out": a child exited */

  ._Layout_cd3zg_1[data-direction="out"] {
    transition-delay: var(--tg-layout-exit-delay);
    transition-duration: var(--tg-layout-exit-duration);
    transition-timing-function: var(--tg-layout-exit-timing-function);
  }

  /* "move" defaults to "in" values */
  ._Layout_cd3zg_1[data-direction="move"] {
    transition-delay: var(--tg-layout-move-delay);
    transition-duration: var(--tg-layout-move-duration);
    transition-timing-function: var(--tg-layout-move-timing-function);
  }

  /* Interruptions should not experience delays */
  ._Layout_cd3zg_1[data-interrupted="true"] {
    transition-delay: 0ms;
  }._TransitionItem_cd3zg_38 {
  flex-shrink: 0;
  will-change: var(--tg-will-change, auto);

  /* Interruptions are allowed to experience delay, as opposed to <Animate> */
  /* This is because they may involve interplay with a non-clipped container, which then creates */
  /* unintended visual artifacts if the interruption is not delayed. */
}

  ._TransitionItem_cd3zg_38[data-entering],
  ._TransitionItem_cd3zg_38[data-exiting] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }

    ._Layout_cd3zg_1[data-dimension="width"] > ._TransitionItem_cd3zg_38[data-entering], ._Layout_cd3zg_1[data-dimension="width"] > ._TransitionItem_cd3zg_38[data-exiting] {
      width: auto;
    }

    ._Layout_cd3zg_1[data-item-anchor="end"] > ._TransitionItem_cd3zg_38[data-entering], ._Layout_cd3zg_1[data-item-anchor="end"] > ._TransitionItem_cd3zg_38[data-exiting] {
      top: initial;
      bottom: 0;
    }

    ._Layout_cd3zg_1[data-item-anchor="end"][data-dimension="width"] > ._TransitionItem_cd3zg_38[data-entering], ._Layout_cd3zg_1[data-item-anchor="end"][data-dimension="width"] > ._TransitionItem_cd3zg_38[data-exiting] {
      right: 0;
      left: initial;
    }

  ._TransitionItem_cd3zg_38[data-entering] {
    filter: var(--tg-initial-filter);
    opacity: var(--tg-initial-opacity);
    transform: var(--tg-initial-transform);
  }

  ._TransitionItem_cd3zg_38[data-exiting] {
    filter: var(--tg-enter-filter);
    opacity: var(--tg-enter-opacity);
    transform: var(--tg-enter-transform);
  }
  ._TransitionItem_cd3zg_38[data-entering-active],
  ._TransitionItem_cd3zg_38[data-entering][data-interrupted] {
    filter: var(--tg-enter-filter);
    opacity: var(--tg-enter-opacity);
    transform: var(--tg-enter-transform);
    transition:
      opacity var(--tg-enter-duration) var(--tg-enter-timing-function) var(--tg-enter-delay),
      transform var(--tg-enter-duration) var(--tg-enter-timing-function) var(--tg-enter-delay),
      filter var(--tg-enter-duration) var(--tg-enter-timing-function) var(--tg-enter-delay);
  }

  ._TransitionItem_cd3zg_38[data-exiting-active],
  ._TransitionItem_cd3zg_38[data-exiting][data-interrupted] {
    filter: var(--tg-exit-filter);
    opacity: var(--tg-exit-opacity);
    transform: var(--tg-exit-transform);
    transition:
      opacity var(--tg-exit-duration) var(--tg-exit-timing-function) var(--tg-exit-delay),
      transform var(--tg-exit-duration) var(--tg-exit-timing-function) var(--tg-exit-delay),
      filter var(--tg-exit-duration) var(--tg-exit-timing-function) var(--tg-exit-delay);
  }
}
@layer components {._LayoutItem_v3f0a_1 {
  position: relative;
  flex-shrink: 0;

  /* Enter & Exit staging occurs in JS */
}

  ._LayoutItem_v3f0a_1[data-entering-active],
  ._LayoutItem_v3f0a_1[data-entering][data-interrupted] {
    transition:
      height var(--tg-layout-enter-duration) var(--tg-layout-enter-timing-function)
        var(--tg-layout-enter-delay),
      width var(--tg-layout-enter-duration) var(--tg-layout-enter-timing-function)
        var(--tg-layout-enter-delay);
  }

  ._LayoutItem_v3f0a_1[data-exiting-active],
  ._LayoutItem_v3f0a_1[data-exiting][data-interrupted] {
    transition:
      height var(--tg-layout-exit-duration) var(--tg-layout-exit-timing-function)
        var(--tg-layout-exit-delay),
      width var(--tg-layout-exit-duration) var(--tg-layout-exit-timing-function)
        var(--tg-layout-exit-delay);
  }._TransitionItem_v3f0a_24 {
  display: block;
  will-change: var(--tg-will-change);

  /* Interruptions are allowed to experience delay, as opposed to <Animate> */
  /* This is because they may involve interplay with a non-clipped container, which then creates */
  /* unintended visual artifacts if the interruption is not delayed. */
}

  ._LayoutItem_v3f0a_1[data-entering] > ._TransitionItem_v3f0a_24 {
    filter: var(--tg-initial-filter);
    opacity: var(--tg-initial-opacity);
    transform: var(--tg-initial-transform);
  }

  ._LayoutItem_v3f0a_1[data-exiting] > ._TransitionItem_v3f0a_24 {
    filter: var(--tg-enter-filter);
    opacity: var(--tg-enter-opacity);
    transform: var(--tg-enter-transform);
  }

  /* Width cannot be measured like height can in some scenarios */
  ._LayoutItem_v3f0a_1[data-entering] > ._TransitionItem_v3f0a_24[data-dimension="width"] {
    position: absolute;
    top: 0;
    left: 0;
  }
  ._LayoutItem_v3f0a_1[data-entering-active] > ._TransitionItem_v3f0a_24,
  ._LayoutItem_v3f0a_1[data-entering][data-interrupted] > ._TransitionItem_v3f0a_24 {
    filter: var(--tg-enter-filter);
    opacity: var(--tg-enter-opacity);
    transform: var(--tg-enter-transform);
    transition:
      opacity var(--tg-enter-duration) var(--tg-enter-timing-function) var(--tg-enter-delay),
      transform var(--tg-enter-duration) var(--tg-enter-timing-function) var(--tg-enter-delay),
      filter var(--tg-enter-duration) var(--tg-enter-timing-function) var(--tg-enter-delay);
  }

  ._LayoutItem_v3f0a_1[data-exiting-active] > ._TransitionItem_v3f0a_24,
  ._LayoutItem_v3f0a_1[data-exiting][data-interrupted] > ._TransitionItem_v3f0a_24 {
    filter: var(--tg-exit-filter);
    opacity: var(--tg-exit-opacity, 0);
    transform: var(--tg-exit-transform);
    transition:
      opacity var(--tg-exit-duration) var(--tg-exit-timing-function) var(--tg-exit-delay),
      transform var(--tg-exit-duration) var(--tg-exit-timing-function) var(--tg-exit-delay),
      filter var(--tg-exit-duration) var(--tg-exit-timing-function) var(--tg-exit-delay);
  }
}
@layer components {._Badge_1viyg_1 {
  --indicator-size: var(--badge-indicator-size);

  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1);
  height: var(--badge-size);
  padding: 0 var(--badge-gutter);
  border-radius: var(--badge-radius);
  font-size: var(--badge-font-size);
  font-weight: var(--badge-font-weight);
  letter-spacing: var(--badge-tracking);
  white-space: nowrap;
}

  ._Badge_1viyg_1 svg {
    font-size: var(--badge-icon-font-size);
  }

    :where(._Badge_1viyg_1 svg:first-child:not(:only-child)) {
      margin-left: var(--badge-icon-offset, -1px);
    }

    :where(._Badge_1viyg_1 svg:last-child:not(:only-child)) {
      margin-right: var(--badge-icon-offset, -1px);
    }

  /* =============================================
    Variants
  ============================================= */
  ._Badge_1viyg_1[data-variant="soft"] {
    background-color: var(--badge-background-color);
    color: var(--badge-text-color);
  }

    ._Badge_1viyg_1[data-variant="soft"]:where([data-color="secondary"]) {
      --badge-background-color: var(--color-background-secondary-soft-alpha);
      --badge-text-color: var(--color-text-secondary-soft);
    }

    ._Badge_1viyg_1[data-variant="soft"]:where([data-color="success"]) {
      --badge-background-color: var(--color-background-success-soft-alpha);
      --badge-text-color: var(--color-text-success-soft);
    }

    ._Badge_1viyg_1[data-variant="soft"]:where([data-color="warning"]) {
      --badge-background-color: var(--color-background-warning-soft-alpha);
      --badge-text-color: var(--color-text-warning-soft);
    }

    ._Badge_1viyg_1[data-variant="soft"]:where([data-color="danger"]) {
      --badge-background-color: var(--color-background-danger-soft-alpha);
      --badge-text-color: var(--color-text-danger-soft);
    }

    ._Badge_1viyg_1[data-variant="soft"]:where([data-color="info"]) {
      --badge-background-color: var(--color-background-info-soft-alpha);
      --badge-text-color: var(--color-text-info-soft);
    }

    ._Badge_1viyg_1[data-variant="soft"]:where([data-color="discovery"]) {
      --badge-background-color: var(--color-background-discovery-soft-alpha);
      --badge-text-color: var(--color-text-discovery-soft);
    }

  ._Badge_1viyg_1[data-variant="solid"] {
    background-color: var(--badge-background-color);
    color: var(--badge-text-color);
  }

    ._Badge_1viyg_1[data-variant="solid"]:where([data-color="secondary"]) {
      --badge-background-color: var(--color-background-secondary-solid);
      --badge-text-color: var(--color-text-secondary-solid);
    }

    ._Badge_1viyg_1[data-variant="solid"]:where([data-color="success"]) {
      --badge-background-color: var(--color-background-success-solid);
      --badge-text-color: var(--color-text-success-solid);
    }

    ._Badge_1viyg_1[data-variant="solid"]:where([data-color="warning"]) {
      --badge-background-color: var(--color-background-warning-solid);
      --badge-text-color: var(--color-text-warning-solid);
    }

    ._Badge_1viyg_1[data-variant="solid"]:where([data-color="danger"]) {
      --badge-background-color: var(--color-background-danger-solid);
      --badge-text-color: var(--color-text-danger-solid);
    }

    ._Badge_1viyg_1[data-variant="solid"]:where([data-color="info"]) {
      --badge-background-color: var(--color-background-info-solid);
      --badge-text-color: var(--color-text-info-solid);
    }

    ._Badge_1viyg_1[data-variant="solid"]:where([data-color="discovery"]) {
      --badge-background-color: var(--color-background-discovery-solid);
      --badge-text-color: var(--color-text-discovery-solid);
    }

  ._Badge_1viyg_1[data-variant="outline"] {
    /* Avoids additive `width` compared to other variants */
    box-shadow: 0 0 0 1px var(--badge-border-color) inset;
    color: var(--badge-text-color);
  }

    ._Badge_1viyg_1[data-variant="outline"]:where([data-color="secondary"]) {
      --badge-border-color: var(--color-border-secondary-outline);
      --badge-text-color: var(--color-text-secondary-outline);
    }

    ._Badge_1viyg_1[data-variant="outline"]:where([data-color="success"]) {
      --badge-border-color: var(--color-border-success-outline);
      --badge-text-color: var(--color-text-success-outline);
    }

    ._Badge_1viyg_1[data-variant="outline"]:where([data-color="warning"]) {
      --badge-border-color: var(--color-border-warning-outline);
      --badge-text-color: var(--color-text-warning-outline);
    }

    ._Badge_1viyg_1[data-variant="outline"]:where([data-color="danger"]) {
      --badge-border-color: var(--color-border-danger-outline);
      --badge-text-color: var(--color-text-danger-outline);
    }

    ._Badge_1viyg_1[data-variant="outline"]:where([data-color="info"]) {
      --badge-border-color: var(--color-border-info-outline);
      --badge-text-color: var(--color-text-info-outline);
    }

    ._Badge_1viyg_1[data-variant="outline"]:where([data-color="discovery"]) {
      --badge-border-color: var(--color-border-discovery-outline);
      --badge-text-color: var(--color-text-discovery-outline);
    }

  /* =============================================
    Sizes
  ============================================= */
  ._Badge_1viyg_1:where([data-size="sm"]) {
    --badge-size: var(--badge-size-sm);
    --badge-gutter: var(--badge-gutter-sm);
    --badge-font-size: var(--badge-font-size-sm);
    --badge-font-weight: var(--badge-font-weight-sm);
    --badge-tracking: var(--badge-tracking-sm);
    --badge-radius: var(--badge-radius-sm);
    --badge-icon-font-size: var(--badge-icon-font-size-sm);
    --badge-indicator-size: var(--badge-indicator-size-sm);
  }

  ._Badge_1viyg_1:where([data-size="md"]) {
    --badge-size: var(--badge-size-md);
    --badge-gutter: var(--badge-gutter-md);
    --badge-font-size: var(--badge-font-size-md);
    --badge-font-weight: var(--badge-font-weight-md);
    --badge-tracking: var(--badge-tracking-md);
    --badge-radius: var(--badge-radius-md);
    --badge-icon-font-size: var(--badge-icon-font-size-md);
    --badge-indicator-size: var(--badge-indicator-size-md);
  }

  ._Badge_1viyg_1:where([data-size="lg"]) {
    --badge-size: var(--badge-size-lg);
    --badge-gutter: var(--badge-gutter-lg);
    --badge-font-size: var(--badge-font-size-lg);
    --badge-font-weight: var(--badge-font-weight-lg);
    --badge-tracking: var(--badge-tracking-lg);
    --badge-radius: var(--badge-radius-lg);
    --badge-icon-font-size: var(--badge-icon-font-size-lg);
    --badge-indicator-size: var(--badge-indicator-size-lg);
  }

  /* =============================================
    Pill
  ============================================= */
  ._Badge_1viyg_1:where([data-pill]) {
    --badge-radius: var(--radius-full);

    padding: 0 calc(var(--badge-gutter) * var(--control-gutter-pill-scaling));
  }
}