/* || OUTLINED */
:host([variant="outlined"]) {
  --md-button-background-color: transparent;
  --md-button-border-color: var(--md-sys-color-outline);
  --md-button-foreground-color: var(--md-sys-color-primary);
  --md-button-border-size: 0.063rem;
  --_container-space-top: calc(
    var(--md-button-block-start-space) - var(--md-button-border-size)
  );
  --_container-space-bottom: calc(
    var(--md-button-block-end-space) - var(--md-button-border-size)
  );

  --md-button-pressed-state-color: color-mix(
    in oklch,
    var(--md-sys-color-primary) 12%,
    transparent
  );
  --md-button-pressed-state-opacity: 1;
}

:host([variant="outlined"]:focus-visible:not([disabled])) {
  --md-button-border-color: var(--md-sys-color-primary);
  --md-button-background-color: color-mix(
    in oklch,
    var(--md-sys-color-primary) 12%,
    transparent
  );
}

:host([variant="outlined"][disabled]) {
  --md-button-foreground-color: color-mix(
    in oklch,
    var(--md-sys-color-on-surface),
    transparent 38%
  );
  --md-button-border-color: color-mix(
    in oklch,
    var(--md-sys-color-outline),
    transparent 38%
  );
}