.ombox-color-picker {
    width: 100%;
}

.ombox-theme-color-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    gap: var(--space-2, 8px);
}

.ombox-theme-color-option {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    min-height: var(--widget-control-min-height, 38px);
    padding: var(--widget-control-padding-y, 7px) var(--widget-control-padding-x, 12px);
    color: var(--color-text-primary);
    background: var(--color-white);
    border: var(--border-width-thin) solid var(--color-border);
    border-radius: var(--widget-control-radius, var(--radius-md, 8px));
    text-align: left;
}

.ombox-theme-color-option:hover,
.ombox-theme-color-option:focus-visible,
.ombox-theme-color-option.is-selected {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-light);
}

.ombox-theme-color-option:disabled {
    cursor: not-allowed;
    opacity: .62;
}

.ombox-theme-color-swatch {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 4px);
    background: var(--color-primary);
}

[data-ombox-theme-color="success"] .ombox-theme-color-swatch { background: var(--color-success); }
[data-ombox-theme-color="warning"] .ombox-theme-color-swatch { background: var(--color-warning); }
[data-ombox-theme-color="danger"] .ombox-theme-color-swatch { background: var(--color-danger); }
[data-ombox-theme-color="info"] .ombox-theme-color-swatch { background: var(--color-info); }
[data-ombox-theme-color="light"] .ombox-theme-color-swatch { background: var(--color-gray-50); }

.ombox-theme-color-label {
    min-width: 0;
    font-size: var(--widget-font-size, 14px);
    line-height: var(--widget-line-height, 1.571);
}

body.eye-protection .ombox-theme-color-option {
    border-color: #d9cbb8;
    background: #faf8f3;
    color: #4a3c28;
}

body.eye-protection .ombox-theme-color-option:hover,
body.eye-protection .ombox-theme-color-option:focus-visible,
body.eye-protection .ombox-theme-color-option.is-selected {
    border-color: var(--color-primary);
}