:where(:root),
:where(:host) {
  --vaadin-dashboard-widget-title-font-weight: var(--aura-font-weight-medium);
  --vaadin-dashboard-widget-header-padding: var(--vaadin-padding-s) var(--vaadin-padding-m);
  --vaadin-dashboard-widget-header-gap: var(--vaadin-gap-xs);
}

vaadin-dashboard-widget {
  --aura-surface-level: 2;
  --aura-surface-opacity: 0.5;
  background: var(--vaadin-dashboard-widget-background, var(--aura-surface-color) padding-box);

  &::part(content) {
    transition: 200ms;
    transition-property: filter, opacity;
  }

  &:is([resize-mode], [move-mode])::part(content) {
    opacity: 0.75;
    filter: blur(10px);
    clip-path: inset(0);
    transition-duration: 50ms;
  }

  &[theme~='outlined'] {
    --vaadin-dashboard-widget-border-color: var(--vaadin-border-color);
  }

  &[theme~='elevated'] {
    --aura-surface-opacity: 0.7;
    --aura-surface-level: 3;
    --vaadin-dashboard-widget-shadow: var(--aura-shadow-xs);
    --vaadin-dashboard-widget-border-color: light-dark(
      color-mix(in srgb, var(--vaadin-border-color-secondary) 70%, var(--aura-shadow-color)),
      var(--vaadin-border-color-secondary)
    );
  }

  &[editable] {
    --vaadin-dashboard-widget-shadow: var(--aura-shadow-s);
    --vaadin-dashboard-widget-border-color: light-dark(
      color-mix(in srgb, var(--vaadin-border-color-secondary), var(--aura-shadow-color)),
      var(--vaadin-border-color-secondary)
    );
  }

  &[selected] {
    --vaadin-dashboard-widget-background: var(--aura-accent-surface) padding-box;
    --vaadin-dashboard-widget-border-color: var(--aura-accent-color);
    --vaadin-dashboard-widget-shadow: var(--aura-shadow-s);
  }
}

vaadin-dashboard-section {
  vaadin-dashboard-widget {
    transition: 200ms;
    transition-property: filter, opacity;
  }

  &[move-mode] vaadin-dashboard-widget {
    opacity: 0.75;
    filter: blur(10px);
    clip-path: inset(0);
    transition-duration: 50ms;
  }
}

:is(vaadin-dashboard-widget, vaadin-dashboard-section) {
  &::part(button) {
    background: var(--aura-surface-color) padding-box;
    color: var(--vaadin-text-color-secondary);
    border: 1px solid var(--vaadin-border-color);
    transition: 120ms color;
    outline-offset: -1px;
  }

  &::part(resize-shrink-height-button),
  &::part(resize-grow-height-button) {
    margin-top: 0;
    border-bottom: 0;
  }

  &::part(move-forward-button),
  &::part(resize-shrink-width-button),
  &::part(resize-grow-width-button) {
    margin-inline-start: 0;
    border-inline-end: 0;
  }

  &::part(move-backward-button) {
    margin-inline-end: 0;
    border-inline-start: 0;
  }

  &::part(move-apply-button),
  &::part(resize-apply-button) {
    background: var(--aura-accent-color);
    color: var(--aura-accent-contrast-color);
    box-shadow: 0 0 0 3px var(--aura-surface-color);
    outline-offset: 2px;
  }

  @media (any-hover: hover) {
    &::part(button):hover {
      color: var(--vaadin-text-color);
    }

    &::part(move-apply-button):hover,
    &::part(resize-apply-button):hover {
      color: var(--aura-accent-contrast-color);
    }
  }

  &::part(move-button),
  &::part(remove-button),
  &::part(resize-button) {
    background: transparent;
    border: 0;
    color: var(--vaadin-text-color-disabled);
    outline-offset: -2px;
  }

  &[editable] {
    --vaadin-dashboard-widget-header-padding: var(--vaadin-padding-xs);
  }
}