/* Theme picker shared by the dashboard header and the POS header (views/layouts/_theme-picker.php) */
.theme-picker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.theme-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 2px solid rgb(255 255 255 / 75%);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgb(0 0 0 / 22%);
    color: #fff;
    font-size: 11px;
    cursor: pointer;
}

.theme-swatch:hover { transform: scale(1.1); }
.theme-swatch:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.theme-swatch i { pointer-events: none; }
.theme-swatch.blue { background: #29a3e0; }
.theme-swatch.orange { background: #d9480f; }
.theme-swatch.green { background: #2e7d32; }
.theme-swatch.dark { background: #0a1119; }

.theme-swatch[aria-pressed="true"] { outline: 2px solid var(--theme-swatch-ring, currentColor); outline-offset: 1px; }