:root {
  /**
   * Shadows
   * Shadow effects indicate elevation and, at times, interactivity.
   * Elevation is defined by levels relative to the surface where the element rests -
   *  *  Inset sits below the surface for a punched-in effect
   *  *  Level 0 is the surface level
   *  *  Level 1 is slightly raised above the surface and often signifies that an element is interactive, such as a card
   *  *  Level 2 is raised above all other elements on the same surface, such as dropdown menus
   *  *  Level 3 is raised above all elements on all surfaces, such as dialogs and drawers
   */
  /* Shadow blur is designed to scale according to a single base value to ensure consistent and realistic effects.
   * The base value is intended for calculations and is not used by components directly. */
  --wa-shadow-blur-multiplier: 0.375;
  --wa-shadow-blur-xs: calc(var(--wa-shadow-blur-multiplier) * 0.75rem);
  --wa-shadow-blur-s: calc(var(--wa-shadow-blur-multiplier) * 1rem);
  --wa-shadow-blur-m: calc(var(--wa-shadow-blur-multiplier) * 1.5rem);
  --wa-shadow-blur-l: calc(var(--wa-shadow-blur-multiplier) * 2rem);

  /* Offset values are used in pre-constructed shadows and may be used when creating custom shadows
   * or transforming elements with shadows. */
  --wa-shadow-offset-y-multiplier: 0.25;
  --wa-shadow-offset-y-xs: calc(var(--wa-shadow-offset-y-multiplier) * 0.75rem);
  --wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-multiplier) * 1rem);
  --wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-multiplier) * 1.5rem);
  --wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-multiplier) * 2rem);

  --wa-shadow-offset-x-multiplier: 0;
  --wa-shadow-offset-x-xs: calc(var(--wa-shadow-offset-x-multiplier) * 0.75rem);
  --wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-multiplier) * 1rem);
  --wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-multiplier) * 1.5rem);
  --wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-multiplier) * 2rem);

  --wa-shadow-xs: inset var(--wa-shadow-offset-x-xs) var(--wa-shadow-offset-y-xs) var(--wa-shadow-blur-xs)
    var(--wa-color-shadow);
  --wa-shadow-level-0: none;
  --wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-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-color-shadow);
  --wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l) var(--wa-color-shadow);

  /**
   * Background effects
   */
  --wa-background-transparency-percent: 12%;
  --wa-filter-blur: blur(0.3125rem);
}

/* #region Alerts */
@supports (backdrop-filter: blur()) or (-webkit-backdrop-filter: blur()) {
  wa-alert {
    &::part(base) {
      -webkit-backdrop-filter: var(--wa-filter-blur);
      backdrop-filter: var(--wa-filter-blur);
    }

    &[variant='brand'] {
      --background: color-mix(
        in oklab,
        var(--wa-color-brand-fill-quiet),
        transparent var(--wa-background-transparency-percent)
      );
    }

    &[variant='success'] {
      --background: color-mix(
        in oklab,
        var(--wa-color-success-fill-quiet),
        transparent var(--wa-background-transparency-percent)
      );
    }

    &[variant='neutral'] {
      --background: color-mix(
        in oklab,
        var(--wa-color-neutral-fill-quiet),
        transparent var(--wa-background-transparency-percent)
      );
    }

    &[variant='warning'] {
      --background: color-mix(
        in oklab,
        var(--wa-color-warning-fill-quiet),
        transparent var(--wa-background-transparency-percent)
      );
    }

    &[variant='danger'] {
      --background: color-mix(
        in oklab,
        var(--wa-color-danger-fill-quiet),
        transparent var(--wa-background-transparency-percent)
      );
    }
  }
}
/* #endregion */

/* #region Buttons */
wa-button:not([appearance='text']) {
  --box-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
    inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1) /* top highlight */,
    inset 0 1.25em 0 0 rgb(255 255 255 / 0.1) /* upper tint */, inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
    inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */, var(--wa-shadow-s) /* outer shadow */;

  margin-bottom: var(--wa-shadow-offset-y-xs);
  transition: transform var(--wa-transition-fast);

  &:not([disabled]) {
    &:hover {
      --box-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
        inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1) /* top highlight */,
        inset 0 1.25em 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
        inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
        inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.1) /* bottom highlight */, var(--wa-shadow-m) /* outer shadow */;
    }

    &:active {
      --box-shadow: inset 0 -0.0625rem 0 0 rgb(255 255 255 / 0.1) /* shine */,
        inset 0 0.125rem 0 0 rgb(0 0 0 / 0.1) /* top highlight */,
        inset 0 1.25em 0 0 rgb(255 255 255 / 0.08) /* upper tint */,
        inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
        inset 0 -0.125rem 0 0 rgb(255 255 255 / 0.04) /* bottom highlight */, 0 0 0 0 transparent /* outer shadow */;

      transform: translateY(var(--wa-shadow-offset-y-xs));
    }
  }
}

wa-button:not([appearance='outlined']) {
  &[variant='brand'] {
    --background: linear-gradient(var(--wa-color-brand-fill-loud) 25%, var(--wa-color-brand-fill-loud));
    --background-hover: linear-gradient(
      color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--wa-color-mix-hover)) 25%,
      color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--wa-color-mix-hover))
    );
    --background-active: linear-gradient(
      color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--wa-color-mix-active)),
      var(--wa-color-brand-fill-loud)
    );
    --border-color: var(--wa-color-brand-fill-loud)
      color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--wa-color-brand-fill-loud))
      var(--wa-color-brand-fill-loud);
    --border-color-hover: var(--border-color);
    --border-color-active: var(--wa-color-brand-fill-loud);
  }

  &[variant='success'] {
    --background: linear-gradient(var(--wa-color-success-fill-loud) 25%, var(--wa-color-success-fill-loud));
    --background-hover: linear-gradient(
      color-mix(in oklab, var(--wa-color-success-fill-loud), var(--wa-color-mix-hover)) 25%,
      color-mix(in oklab, var(--wa-color-success-fill-loud), var(--wa-color-mix-hover))
    );
    --background-active: linear-gradient(
      color-mix(in oklab, var(--wa-color-success-fill-loud), var(--wa-color-mix-active)),
      var(--wa-color-success-fill-loud)
    );
    --border-color: var(--wa-color-success-fill-loud)
      color-mix(in oklab, var(--wa-color-success-fill-loud), var(--wa-color-success-fill-loud))
      var(--wa-color-success-fill-loud);
    --border-color-hover: var(--border-color);
    --border-color-active: var(--wa-color-success-fill-loud);
  }

  &[variant='neutral'] {
    --background: linear-gradient(var(--wa-color-neutral-fill-loud) 25%, var(--wa-color-neutral-fill-loud));
    --background-hover: linear-gradient(
      color-mix(in oklab, var(--wa-color-neutral-fill-loud), var(--wa-color-mix-hover)) 25%,
      color-mix(in oklab, var(--wa-color-neutral-fill-loud), var(--wa-color-mix-hover))
    );
    --background-active: linear-gradient(
      color-mix(in oklab, var(--wa-color-neutral-fill-loud), var(--wa-color-mix-active)),
      var(--wa-color-neutral-fill-loud)
    );
    --border-color: var(--wa-color-neutral-fill-loud)
      color-mix(in oklab, var(--wa-color-neutral-fill-loud), var(--wa-color-neutral-fill-loud))
      var(--wa-color-neutral-fill-loud);
    --border-color-hover: var(--border-color);
    --border-color-active: var(--wa-color-neutral-fill-loud);
  }

  &[variant='warning'] {
    --background: linear-gradient(var(--wa-color-warning-fill-loud) 25%, var(--wa-color-warning-fill-loud));
    --background-hover: linear-gradient(
      color-mix(in oklab, var(--wa-color-warning-fill-loud), var(--wa-color-mix-hover)) 25%,
      color-mix(in oklab, var(--wa-color-warning-fill-loud), var(--wa-color-mix-hover))
    );
    --background-active: linear-gradient(
      color-mix(in oklab, var(--wa-color-warning-fill-loud), var(--wa-color-mix-active)),
      var(--wa-color-warning-fill-loud)
    );
    --border-color: var(--wa-color-warning-fill-loud)
      color-mix(in oklab, var(--wa-color-warning-fill-loud), var(--wa-color-warning-fill-loud))
      var(--wa-color-warning-fill-loud);
    --border-color-hover: var(--border-color);
    --border-color-active: var(--wa-color-warning-fill-loud);
  }

  &[variant='danger'] {
    --background: linear-gradient(var(--wa-color-danger-fill-loud) 25%, var(--wa-color-danger-fill-loud));
    --background-hover: linear-gradient(
      color-mix(in oklab, var(--wa-color-danger-fill-loud), var(--wa-color-mix-hover)) 25%,
      color-mix(in oklab, var(--wa-color-danger-fill-loud), var(--wa-color-mix-hover))
    );
    --background-active: linear-gradient(
      color-mix(in oklab, var(--wa-color-danger-fill-loud), var(--wa-color-mix-active)),
      var(--wa-color-danger-fill-loud)
    );
    --border-color: var(--wa-color-danger-fill-loud)
      color-mix(in oklab, var(--wa-color-danger-fill-loud), var(--wa-color-danger-fill-loud))
      var(--wa-color-danger-fill-loud);
    --border-color-hover: var(--border-color);
    --border-color-active: var(--wa-color-danger-fill-loud);
  }
}
/* #endregion */

/* #region Cards */
@supports (backdrop-filter: blur()) or (-webkit-backdrop-filter: blur()) {
  wa-card {
    --background: color-mix(
      in oklab,
      var(--wa-color-surface-raised),
      transparent var(--wa-background-transparency-percent)
    );

    /* &::part(base) {
      -webkit-backdrop-filter: var(--wa-filter-blur);
      backdrop-filter: var(--wa-filter-blur);
    } */
    /* causes popups descendants (e.g. tooltips and dropdowns) to be mispositioned */
  }
}
/* #endregion */

/* #region Inputs */
wa-input:not(:focus),
wa-select {
  &:not([filled]):not([disabled]) {
    --box-shadow: var(--wa-shadow-xs), inset 0 1.25em 0 0 rgb(0 0 0 / 0.02) /* upper tint */,
      inset 0 -1.125em 0 0 rgb(255 255 255 / 0.05) /* lower shade */;
  }
}

wa-textarea:not(:focus) {
  &:not([filled]):not([disabled]) {
    --box-shadow: var(--wa-shadow-xs);
  }
}

@supports (backdrop-filter: blur()) or (-webkit-backdrop-filter: blur()) {
  wa-select::part(listbox) {
    background: color-mix(
      in oklab,
      var(--wa-color-surface-raised),
      transparent var(--wa-background-transparency-percent)
    );
    -webkit-backdrop-filter: var(--wa-filter-blur);
    backdrop-filter: var(--wa-filter-blur);
  }
}

wa-checkbox {
  --background-checked: linear-gradient(
    to bottom,
    var(--wa-form-control-activated-color),
    var(--wa-color-brand-border-loud)
  );

  &:not([checked]):not([indeterminate]) {
    --box-shadow: var(--wa-shadow-xs);
  }

  &[checked] {
    --box-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
      inset 0 0.125rem 0 0 rgb(255 255 255 / 0.05) /* top highlight */,
      inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */, var(--wa-shadow-s) /* outer shadow */;
  }
}

wa-switch {
  --box-shadow: var(--wa-shadow-xs);
  --thumb-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
    inset 0 0.125rem 0 0 rgb(255 255 255 / 0.05) /* top highlight */,
    inset 0 calc(var(--height) * 0.25) 0 0 rgb(255 255 255 / 0.04) /* upper tint */,
    inset 0 calc(var(--height) * -0.25) 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
    inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */, var(--wa-shadow-s) /* outer shadow */;
}
/* #endregion */

/* #region Progress bar */
wa-progress-bar {
  --box-shadow: var(--wa-shadow-xs);
}
/* #endregion */
