:where(:root),
:where(:host) {
  --vaadin-button-shadow: var(--aura-shadow-xs);
}

:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit) {
  transition: scale 180ms;
  position: relative;
  --_background: var(--aura-accent-surface) padding-box;
  color: var(--vaadin-button-text-color, var(--aura-accent-text-color));
}

vaadin-drawer-toggle[theme~='tertiary']::part(icon) {
  opacity: 0.6;
}

:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):where(
  :not([theme~='tertiary'])
) {
  --aura-surface-level: 4;
  --aura-surface-opacity: 0.5;
  box-shadow: var(--vaadin-button-shadow);
}

/* prettier-ignore */
:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):not([theme~='primary'], [theme~='tertiary']) {
  background: var(--vaadin-button-background, var(--_background));
  border-color: var(--vaadin-button-border-color, var(--aura-accent-border-color));
}

:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):where(
  :not([theme~='primary'])
) {
  outline-offset: calc(var(--vaadin-button-border-width, 1px) * -1);
}

/*
Increase padding, but only for buttons that don't have an icon in the default slot.
Buttons that place an icon in the default slot are assumed to be icon-only buttons.
*/
/* prettier-ignore */
:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-crud-edit):not(:has(> :is(vaadin-icon, vaadin-badge, svg, i[class*='fa-'], vaadin-avatar):not([slot]))) {
  --vaadin-button-padding: var(--vaadin-padding-block-container)
    var(--vaadin-padding-m);
}

/* Decrease padding when an icon is placed in the prefix or suffix slot */
:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button)[theme~='tertiary'],
:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button):has(
  > [slot='prefix']:is(vaadin-icon, vaadin-badge, svg, i[class*='fa-'], vaadin-avatar)
) {
  padding-inline-start: var(--vaadin-padding-s);
}

:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button)[theme~='tertiary'],
:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button):has(
  > [slot='suffix']:is(vaadin-icon, vaadin-badge, svg, i[class*='fa-'], vaadin-avatar)
),
vaadin-menu-bar-button[aria-haspopup='true']:not([slot='overflow']) {
  padding-inline-end: var(--vaadin-padding-s);
}

:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):where(
  [theme~='primary']
) {
  outline-offset: 2px;
  --vaadin-button-font-weight: var(--aura-font-weight-semibold);
  --vaadin-button-text-color: var(--aura-accent-contrast-color);
  --vaadin-button-background: var(--aura-accent-color);
  --vaadin-button-border-color: var(--vaadin-border-color-secondary);
  --vaadin-button-shadow: var(--aura-shadow-s);
}

:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button)[disabled][theme~='primary']::part(label) {
  color: color-mix(in srgb, currentColor 50%, transparent);
}

:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):not(
    [disabled]
  )::before {
  content: '';
  position: absolute;
  inset: calc(var(--vaadin-button-border-width, 1px) * -1);
  pointer-events: none;
  border-radius: inherit;
  background-color: currentColor;
  opacity: 0;
  transition:
    opacity 100ms,
    background-color 100ms;
}

@supports (color: hsl(0 0 0)) {
  :is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):not(
      [disabled]
    )::before {
    background-color: oklch(from currentColor calc(l + 0.4 - c) c h / calc(1 - l / 2));
  }
}

@media (any-hover: hover) {
  /* prettier-ignore */
  :is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):hover:not([disabled], [active])::before {
    opacity: 0.03;
  }

  /* prettier-ignore */
  :is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit)[theme~='primary']:hover:not([disabled], [active])::before {
    opacity: 0.12;
  }
}

@media (min-resolution: 2x) {
  /* prettier-ignore */
  :is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button[first-visible][last-visible], vaadin-drawer-toggle)[active]:not([disabled], [aria-disabled='true']) {
    scale: 0.98;
    transition-duration: 50ms;
  }
}

:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit)[active]:not(
    [disabled]
  ) {
  box-shadow: none;
}

:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit)[active]:not(
    [disabled]
  )::before {
  transition-duration: 0s;
  opacity: 0.08;
  background: oklch(from currentColor min(c, 1 - l + c) calc(c * 0.9) h);
}

/* prettier-ignore */
:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit)[theme~='primary'][active]:not([disabled])::before {
  opacity: 0.16;
}