@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Wix+Madefor+Text:ital,wght@0,400..800;1,400..800&display=swap');

@layer wa-theme {
  .wa-theme-matter,
  .wa-theme-matter.wa-light,
  .wa-theme-matter .wa-light,
  .wa-theme-matter.wa-dark .wa-invert,
  .wa-theme-matter .wa-dark .wa-invert,
  .wa-light .wa-theme-matter,
  .wa-dark .wa-theme-matter.wa-invert,
  .wa-dark .wa-theme-matter .wa-invert {
    /* #region Colors (Light) ~~~~~~~~~~~~~~~~~~~~~ */
    color-scheme: light;
    color: var(--wa-color-text-normal);

    --wa-color-surface-raised: var(--wa-color-neutral-95);
    --wa-color-surface-default: white;
    --wa-color-surface-lowered: var(--wa-color-neutral-90);
    --wa-color-surface-border: var(--wa-color-neutral-90);

    --wa-color-text-normal: var(--wa-color-neutral-10);
    --wa-color-text-quiet: var(--wa-color-neutral-40);
    --wa-color-text-link: var(--wa-color-brand-40);

    --wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent);
    --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-80) 25%, transparent);

    --wa-color-shadow: rgb(0 0 0 / 0.3);

    --wa-color-focus: var(--wa-color-brand-40);

    --wa-color-mix-hover: white 5%;
    --wa-color-mix-active: white 10%;

    --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
    --wa-color-brand-fill-normal: var(--wa-color-brand-90);
    --wa-color-brand-fill-loud: var(--wa-color-brand-40);
    --wa-color-brand-border-quiet: var(--wa-color-brand-90);
    --wa-color-brand-border-normal: var(--wa-color-brand-80);
    --wa-color-brand-border-loud: var(--wa-color-brand-50);
    --wa-color-brand-on-quiet: var(--wa-color-brand-40);
    --wa-color-brand-on-normal: var(--wa-color-brand-30);
    --wa-color-brand-on-loud: white;

    --wa-color-success-fill-quiet: var(--wa-color-success-95);
    --wa-color-success-fill-normal: var(--wa-color-success-90);
    --wa-color-success-fill-loud: var(--wa-color-success-40);
    --wa-color-success-border-quiet: var(--wa-color-success-90);
    --wa-color-success-border-normal: var(--wa-color-success-80);
    --wa-color-success-border-loud: var(--wa-color-success-50);
    --wa-color-success-on-quiet: var(--wa-color-success-40);
    --wa-color-success-on-normal: var(--wa-color-success-30);
    --wa-color-success-on-loud: white;

    --wa-color-warning-fill-quiet: var(--wa-color-warning-95);
    --wa-color-warning-fill-normal: var(--wa-color-warning-90);
    --wa-color-warning-fill-loud: var(--wa-color-warning-40);
    --wa-color-warning-border-quiet: var(--wa-color-warning-90);
    --wa-color-warning-border-normal: var(--wa-color-warning-80);
    --wa-color-warning-border-loud: var(--wa-color-warning-50);
    --wa-color-warning-on-quiet: var(--wa-color-warning-40);
    --wa-color-warning-on-normal: var(--wa-color-warning-30);
    --wa-color-warning-on-loud: white;

    --wa-color-danger-fill-quiet: var(--wa-color-danger-95);
    --wa-color-danger-fill-normal: var(--wa-color-danger-90);
    --wa-color-danger-fill-loud: var(--wa-color-danger-40);
    --wa-color-danger-border-quiet: var(--wa-color-danger-90);
    --wa-color-danger-border-normal: var(--wa-color-danger-80);
    --wa-color-danger-border-loud: var(--wa-color-danger-50);
    --wa-color-danger-on-quiet: var(--wa-color-danger-40);
    --wa-color-danger-on-normal: var(--wa-color-danger-30);
    --wa-color-danger-on-loud: white;

    --wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
    --wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
    --wa-color-neutral-fill-loud: var(--wa-color-neutral-40);
    --wa-color-neutral-border-quiet: var(--wa-color-neutral-90);
    --wa-color-neutral-border-normal: var(--wa-color-neutral-80);
    --wa-color-neutral-border-loud: var(--wa-color-neutral-50);
    --wa-color-neutral-on-quiet: var(--wa-color-neutral-30);
    --wa-color-neutral-on-normal: var(--wa-color-neutral-20);
    --wa-color-neutral-on-loud: white;
    /* #endregion */
  }

  .wa-theme-matter.wa-dark,
  .wa-theme-matter .wa-dark,
  .wa-theme-matter.wa-invert,
  .wa-theme-matter .wa-invert,
  .wa-dark .wa-theme-matter,
  .wa-light .wa-theme-matter.wa-invert,
  .wa-light .wa-theme-matter .wa-invert {
    /* #region Colors (Dark) ~~~~~~~~~~~~~~~~~~~~~~ */
    color-scheme: dark;
    color: var(--wa-color-text-normal);

    --wa-color-surface-raised: var(--wa-color-neutral-10);
    --wa-color-surface-default: var(--wa-color-neutral-05);
    --wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
    --wa-color-surface-border: var(--wa-color-neutral-20);

    --wa-color-text-normal: var(--wa-color-neutral-95);
    --wa-color-text-quiet: var(--wa-color-neutral-60);
    --wa-color-text-link: var(--wa-color-brand-70);

    --wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
    --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-50) 10%, transparent);

    --wa-color-shadow: color-mix(
      in oklab,
      var(--wa-color-surface-lowered) calc(var(--wa-shadow-blur-scale) * 32% + 40%),
      transparent
    );

    --wa-color-focus: var(--wa-color-brand-60);

    --wa-color-mix-hover: black 8%;
    --wa-color-mix-active: black 16%;

    --wa-color-brand-fill-quiet: var(--wa-color-brand-20);
    --wa-color-brand-fill-normal: var(--wa-color-brand-30);
    --wa-color-brand-fill-loud: var(--wa-color-brand-70);
    --wa-color-brand-border-quiet: var(--wa-color-brand-20);
    --wa-color-brand-border-normal: var(--wa-color-brand-30);
    --wa-color-brand-border-loud: var(--wa-color-brand-60);
    --wa-color-brand-on-quiet: var(--wa-color-brand-70);
    --wa-color-brand-on-normal: var(--wa-color-brand-80);
    --wa-color-brand-on-loud: var(--wa-color-brand-10);

    --wa-color-success-fill-quiet: var(--wa-color-success-20);
    --wa-color-success-fill-normal: var(--wa-color-success-30);
    --wa-color-success-fill-loud: var(--wa-color-success-70);
    --wa-color-success-border-quiet: var(--wa-color-success-20);
    --wa-color-success-border-normal: var(--wa-color-success-30);
    --wa-color-success-border-loud: var(--wa-color-success-60);
    --wa-color-success-on-quiet: var(--wa-color-success-70);
    --wa-color-success-on-normal: var(--wa-color-success-80);
    --wa-color-success-on-loud: var(--wa-color-success-10);

    --wa-color-warning-fill-quiet: var(--wa-color-warning-20);
    --wa-color-warning-fill-normal: var(--wa-color-warning-30);
    --wa-color-warning-fill-loud: var(--wa-color-warning-70);
    --wa-color-warning-border-quiet: var(--wa-color-warning-20);
    --wa-color-warning-border-normal: var(--wa-color-warning-30);
    --wa-color-warning-border-loud: var(--wa-color-warning-60);
    --wa-color-warning-on-quiet: var(--wa-color-warning-70);
    --wa-color-warning-on-normal: var(--wa-color-warning-80);
    --wa-color-warning-on-loud: var(--wa-color-warning-10);

    --wa-color-danger-fill-quiet: var(--wa-color-danger-20);
    --wa-color-danger-fill-normal: var(--wa-color-danger-30);
    --wa-color-danger-fill-loud: var(--wa-color-danger-70);
    --wa-color-danger-border-quiet: var(--wa-color-danger-20);
    --wa-color-danger-border-normal: var(--wa-color-danger-30);
    --wa-color-danger-border-loud: var(--wa-color-danger-60);
    --wa-color-danger-on-quiet: var(--wa-color-danger-70);
    --wa-color-danger-on-normal: var(--wa-color-danger-80);
    --wa-color-danger-on-loud: var(--wa-color-danger-10);

    --wa-color-neutral-fill-quiet: var(--wa-color-neutral-20);
    --wa-color-neutral-fill-normal: var(--wa-color-neutral-30);
    --wa-color-neutral-fill-loud: var(--wa-color-neutral-70);
    --wa-color-neutral-border-quiet: var(--wa-color-neutral-20);
    --wa-color-neutral-border-normal: var(--wa-color-neutral-30);
    --wa-color-neutral-border-loud: var(--wa-color-neutral-80);
    --wa-color-neutral-on-quiet: var(--wa-color-neutral-70);
    --wa-color-neutral-on-normal: var(--wa-color-neutral-80);
    --wa-color-neutral-on-loud: var(--wa-color-neutral-10);
    /* #endregion */
  }

  .wa-theme-matter,
  .wa-theme-matter.wa-light,
  .wa-theme-matter .wa-light,
  .wa-theme-matter.wa-dark,
  .wa-theme-matter .wa-dark,
  .wa-theme-matter.wa-invert,
  .wa-theme-matter .wa-invert {
    font-family: var(--wa-font-family-body);

    /* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-font-family-body: 'Wix Madefor Text', sans-serif;
    --wa-font-family-heading: var(--wa-font-family-body);
    --wa-font-family-code: 'Roboto Mono', monospace;
    --wa-font-family-longform: 'Roboto Serif', serif;

    /* Font sizes use a ratio of 1.125 to scale sizes proportionally.
     * For larger font sizes, each size is twice 1.125x larger to maximize impact.
     * Each value uses `rem` units and is rounded to the nearest whole pixel when rendered. */
    --wa-font-size-scale: 1;
    --wa-font-size-2xs: round(calc(var(--wa-font-size-xs) / 1.125), 1px); /* 11px */
    --wa-font-size-xs: round(calc(var(--wa-font-size-s) / 1.125), 1px); /* 12px */
    --wa-font-size-s: round(calc(var(--wa-font-size-m) / 1.125), 1px); /* 14px */
    --wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 16px */
    --wa-font-size-l: round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px); /* 20px */
    --wa-font-size-xl: round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px); /* 25px */
    --wa-font-size-2xl: round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px); /* 32px */
    --wa-font-size-3xl: round(calc(var(--wa-font-size-2xl) * 1.125 * 1.125), 1px); /* 41px */
    --wa-font-size-4xl: round(calc(var(--wa-font-size-3xl) * 1.125 * 1.125), 1px); /* 52px */

    --wa-font-size-smaller: round(calc(1em / 1.125), 1px);
    --wa-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px);

    --wa-font-weight-light: 300;
    --wa-font-weight-normal: 400;
    --wa-font-weight-semibold: 500;
    --wa-font-weight-bold: 700;

    --wa-font-weight-body: var(--wa-font-weight-normal);
    --wa-font-weight-heading: var(--wa-font-weight-semibold);
    --wa-font-weight-code: var(--wa-font-weight-normal);
    --wa-font-weight-longform: var(--wa-font-weight-normal);
    --wa-font-weight-action: var(--wa-font-weight-semibold);

    --wa-line-height-condensed: 1.2;
    --wa-line-height-normal: 1.6;
    --wa-line-height-expanded: 2;

    --wa-link-decoration-default: underline;
    --wa-link-decoration-hover: underline;
    /* #endregion */

    /* #region Space ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-space-scale: 1;
    --wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
    --wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */
    --wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
    --wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
    --wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
    --wa-space-l: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
    --wa-space-xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
    --wa-space-2xl: calc(var(--wa-space-scale) * 2.5rem); /* 40px */
    --wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
    --wa-space-4xl: calc(var(--wa-space-scale) * 4rem); /* 64px */

    --wa-content-spacing: var(--wa-space-l);
    /* #endregion */

    /* #region Borders ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-border-style: solid;

    --wa-border-width-scale: 1;
    --wa-border-width-s: calc(var(--wa-border-width-scale) * 0.0625rem);
    --wa-border-width-m: calc(var(--wa-border-width-scale) * 0.125rem);
    --wa-border-width-l: calc(var(--wa-border-width-scale) * 0.1875rem);
    /* #endregion */

    /* #region Rounding ~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-border-radius-scale: 1.33;
    --wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.1875rem);
    --wa-border-radius-m: calc(var(--wa-border-radius-scale) * 0.375rem);
    --wa-border-radius-l: calc(var(--wa-border-radius-scale) * 0.75rem);

    --wa-border-radius-pill: 9999px;
    --wa-border-radius-circle: 50%;
    --wa-border-radius-square: 0px;
    /* #endregion */

    /* #region Focus ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-focus-ring-style: solid;
    --wa-focus-ring-width: 0.125rem; /* 2px */
    --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);
    --wa-focus-ring-offset: 0rem; /* 0px */
    /* #endregion */

    /* #region Shadows ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-shadow-offset-x-scale: 0;
    --wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 0.125rem);
    --wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 0.25rem);
    --wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 0.5rem);

    --wa-shadow-offset-y-scale: 0.5;
    --wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 0.125rem);
    --wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 0.25rem);
    --wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 0.5rem);

    --wa-shadow-blur-scale: 1.25;
    --wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 0.125rem);
    --wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 0.25rem);
    --wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 0.5rem);

    --wa-shadow-spread-scale: 0;
    --wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 0.125rem);
    --wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 0.25rem);
    --wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 0.5rem);

    --wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
      var(--wa-shadow-spread-s) var(--wa-color-shadow);
    --wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m)
      var(--wa-shadow-spread-m) var(--wa-color-shadow);
    --wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l)
      var(--wa-shadow-spread-l) var(--wa-color-shadow);
    /* #endregion */

    /* #region Transitions ~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-transition-easing: ease;
    --wa-transition-slow: 300ms;
    --wa-transition-normal: 150ms;
    --wa-transition-fast: 75ms;
    /* #endregion */

    /* #region Components ~~~~~~~~~~~~~~~~~~~~~~~ */
    /* Form Controls */
    --wa-form-control-background-color: var(--wa-color-surface-default);

    --wa-form-control-border-color: var(--wa-color-neutral-border-loud);
    --wa-form-control-border-style: var(--wa-border-style);
    --wa-form-control-border-width: var(--wa-border-width-s);
    --wa-form-control-border-radius: var(--wa-border-radius-s);

    --wa-form-control-activated-color: var(--wa-color-brand-fill-loud);

    --wa-form-control-label-color: var(--wa-color-text-normal);
    --wa-form-control-label-font-weight: var(--wa-font-weight-normal);
    --wa-form-control-label-line-height: var(--wa-line-height-condensed);

    --wa-form-control-value-color: var(--wa-color-text-normal);
    --wa-form-control-value-font-weight: var(--wa-font-weight-body);
    --wa-form-control-value-line-height: var(--wa-line-height-condensed);

    --wa-form-control-hint-color: var(--wa-color-text-quiet);
    --wa-form-control-hint-font-weight: var(--wa-font-weight-body);
    --wa-form-control-hint-line-height: var(--wa-line-height-normal);

    --wa-form-control-placeholder-color: var(--wa-color-gray-50);

    --wa-form-control-required-content: '*';
    --wa-form-control-required-content-color: inherit;
    --wa-form-control-required-content-offset: -0.1em;

    --wa-form-control-padding-block: 0.75em;
    --wa-form-control-padding-inline: 1em;
    --wa-form-control-height: round(
      calc(2 * var(--wa-form-control-padding-block) + 1em * var(--wa-form-control-value-line-height)),
      1px
    );
    --wa-form-control-toggle-size: round(1.25em, 1px);

    /* Panels */
    --wa-panel-border-style: var(--wa-border-style);
    --wa-panel-border-width: var(--wa-border-width-s);
    --wa-panel-border-radius: var(--wa-border-radius-l);

    /* Tooltips */
    --wa-tooltip-arrow-size: 0rem;

    --wa-tooltip-background-color: var(--wa-color-text-normal);

    --wa-tooltip-border-radius: var(--wa-border-radius-s);

    --wa-tooltip-content-color: var(--wa-color-surface-default);
    --wa-tooltip-font-size: var(--wa-font-size-s);
    --wa-tooltip-line-height: var(--wa-line-height-normal);
    /* #endregion */
  }
}

@layer wa-theme-overrides {
  @property --ripple-progress {
    syntax: '<number>';
    initial-value: 0;
    inherits: false;
  }

  .wa-theme-matter {
    --ripple-start-radius: 0.1em;
    --ripple-start-opacity: 0.1;
    --ripple-duration: calc(2 * var(--wa-transition-slow));

    wa-button,
    button,
    input:where([type='button'], [type='reset'], [type='submit']) {
      --wa-form-control-border-radius: var(--wa-border-radius-pill);

      &:where(:not(wa-button)),
      &::part(base) {
        box-shadow: 0 0 transparent;
      }

      &:not([appearance~='plain']) {
        &:where(:not(wa-button)),
        &::part(base) {
          padding-inline: calc(var(--wa-form-control-padding-inline) * 1.5);
        }
      }

      &:not([appearance~='outlined'], [appearance~='plain']):hover {
        &:where(:not(wa-button)),
        &::part(base) {
          box-shadow: var(--wa-shadow-s);
        }

        &:active {
          &:where(:not(wa-button)),
          &::part(base) {
            box-shadow: 0 0 transparent;
          }
        }
      }

      &:is([appearance~='outlined']) {
        &:where(:not(wa-button)),
        &::part(base) {
          border-color: var(--wa-form-control-border-color);
        }
      }

      /* Ripple effect */
      /* TODO: fix */
      --ripple-progress: 1;
      --ripple-progress-inv: calc(1 - var(--ripple-progress));
      --ripple-radius: calc(var(--ripple-start-radius) * var(--ripple-progress-inv) + 100% * var(--ripple-progress));
      --ripple-opacity: calc(var(--ripple-start-opacity) * var(--ripple-progress-inv));
      --ripple-color: hsl(0 0% 100% / var(--ripple-opacity));
      --ripple-center-x: calc(100% * var(--mouse-local-x, 0.5));
      --ripple-center-y: calc(100% * var(--mouse-local-y, 0.5));

      background-image: radial-gradient(
        circle at var(--ripple-center-x) var(--ripple-center-y),
        var(--ripple-color) var(--ripple-radius),
        transparent 0
      );
      transition:
        var(--wa-transition-fast),
        --ripple-progress var(--ripple-duration);

      &:active {
        --ripple-progress: 0;
        --ripple-duration: 0s;
      }
    }

    input[type='checkbox'],
    wa-checkbox::part(control),
    wa-tree-item::part(checkbox__control) {
      border-radius: calc(var(--wa-border-radius-s) / 2);
    }

    input:where(
        :not(
          [type='button'],
          [type='checkbox'],
          [type='color'],
          [type='file'],
          [type='hidden'],
          [type='image'],
          [type='radio'],
          [type='range'],
          [type='reset'],
          [type='submit']
        )
      ),
    select,
    textarea,
    wa-input,
    wa-select,
    wa-textarea {
      --wa-form-control-value-line-height: var(--wa-line-height-normal);

      /* Needed for floating label */
      position: relative;

      &:is([appearance~='filled']):not([appearance~='outlined'], [pill]) {
        --wa-focus-ring: ;

        &:focus,
        &:focus-within {
          &:where(:not(wa-input):not(wa-select):not(wa-textarea)),
          &:where(wa-input)::part(input),
          &:where(wa-select)::part(combobox),
          &:where(wa-textarea)::part(base) {
            border-color: transparent transparent var(--wa-color-focus) transparent;
            box-shadow: inset 0 calc(var(--wa-form-control-border-width) * -2) 0 0 var(--wa-color-focus);
          }
        }

        &:where(:not(wa-input):not(wa-select):not(wa-textarea)),
        &:where(wa-input)::part(input),
        &:where(wa-select)::part(combobox),
        &:where(wa-textarea)::part(base) {
          border-color: transparent transparent var(--wa-form-control-border-color) transparent;
          border-radius: var(--wa-form-control-border-radius) var(--wa-form-control-border-radius) 0px 0px;
        }
      }

      /**
     * Floating labels
     */
      &::part(label) {
        transition: all var(--wa-transition-normal);
        pointer-events: none;

        position: absolute;
        left: calc(var(--wa-form-control-padding-inline) - 0.25em);
        z-index: 1;

        /* State: out of the way by default */
        top: -0.5lh;
        font-size: var(--wa-font-size-smaller);

        background-color: var(--wa-form-control-background-color);
        padding-inline: 0.25em;
      }

      &:focus::part(label) {
        color: var(--wa-color-focus);
      }

      /* State: placeholder-like when:
     * - the input is empty
     * - the input is not focused
     * - there is no actual placeholder
     */
      &:state(blank):not(:focus, [placeholder])::part(label) {
        top: calc(var(--wa-form-control-height) / 2 - 0.5lh);
        font-size: inherit;
      }

      /* Different positioning and appearance for filled */
      &:where([appearance~='filled'])[label]:not([placeholder]) {
        &::part(base) {
          /* We want to move this down a bit to make space for the floating label */
          translate: 0 0.3em;
        }

        &::part(label) {
          /* In filled inputs, the floating label stays within the input */
          background-color: transparent;
        }

        &:not(:state(blank):not(:focus, [placeholder]))::part(label) {
          top: 0;
        }
      }
    }

    progress,
    wa-progress-bar::part(base) {
      height: 0.25rem;
      border-radius: var(--wa-border-radius-square);
    }

    input:is([type='checkbox'], [type='radio']),
    wa-checkbox::part(control),
    wa-tree-item::part(checkbox__control),
    wa-radio::part(control) {
      --checked-icon-scale: 0.65;

      border-width: var(--wa-border-width-m);
      margin-inline-end: 0.75em;
    }
    @media (hover: hover) {
      :is(input:where([type='checkbox'], [type='radio']), wa-checkbox, wa-tree-item, wa-radio):hover {
        &:where(input),
        &::part(control),
        &::part(checkbox__control) {
          box-shadow: 0 0 0 0.5em color-mix(in oklab, var(--wa-form-control-border-color), transparent 85%);
        }
        &:is(:checked, :indeterminate, :state(checked), :state(indeterminate)) {
          &:where(input),
          &::part(control),
          &::part(checkbox__control) {
            box-shadow: 0 0 0 0.5em color-mix(in oklab, var(--wa-form-control-activated-color), transparent 85%);
          }
        }
      }
    }

    @media (hover: hover) {
      wa-slider:hover::part(thumb) {
        box-shadow: 0 0 0 0.5em color-mix(in oklab, var(--wa-form-control-activated-color), transparent 85%);
      }
    }

    wa-switch {
      --height: 2em;
      --width: calc(var(--height) * 1.625);
      --thumb-size: 1.5em;
      transition-property: all;

      &::part(control) {
        margin-inline-end: 0.75em;
        background-color: var(--wa-color-surface-raised);
        border-width: var(--wa-border-width-m);
      }

      &:state(checked)::part(control) {
        background-color: var(--wa-form-control-activated-color);
      }

      @media (hover: hover) {
        &:hover {
          &::part(thumb) {
            box-shadow: 0 0 0 0.5em color-mix(in oklab, var(--border-color), transparent 85%);
          }
        }
      }

      &:not(:state(checked))::part(thumb) {
        transform: scale(0.7);
      }

      &:active::part(thumb) {
        transform: scale(1.1);
      }
    }

    wa-tag {
      font-weight: var(--wa-font-weight-semibold);
    }
  }
}