@layer admin-bar {
  admin-bar.admin-bar {
    --admin-bar-bg: linear-gradient(to bottom, oklch(1 0 89.876 / 0.9), oklch(1 0 89.876 / 0.2));
    --admin-bar-border-radius: 10px;
    --admin-bar-button-color-bg-hover: oklch(0.96 0.24 110.68 / 0.95);
    --admin-bar-button-color-text: oklch(0 0 0);
    --admin-bar-badge-color-bg: oklch(0 0 0 / 0.9);
    --admin-bar-badge-color-text: oklch(0.96 0.24 110.68 / 0.95);
    --admin-bar-bg-filter: blur(8px) brightness(2) contrast(1.4) saturate(3);
    --admin-bar-color-highlight: oklch(0.403 0.083 97.313);
    --admin-bar-color-highlight-logout: oklch(0.55 0.23 28.77);
    --admin-bar-color-text: oklch(0 0 0 / 0.9);
    --admin-bar-color-text-logout: oklch(1 0 89.876);
    --admin-bar-progress-color: oklch(0.96 0.24 110.68 / 0.95);
    --admin-bar-progress-height: 3px;
    --widget-search-results-badge-color-text: oklch(0.96 0.24 110.68 / 0.95);

    @supports (not (font: -apple-system-body)) and (not (-moz-appearance: none)) {
      & {
        --admin-bar-enable-glass: true;
        --admin-bar-bg-filter: blur(2px) brightness(2) saturate(3);
      }
    }

    admin-bar-button:hover::part(badge) {
      color: oklch(0.96 0.24 110.68 / 0.95);
    }
  }
}