:root {
  --ty-color-picker-opacity-disabled: 0.5;
  --ty-color-picker-swatch-size: 32px;
  --ty-color-picker-swatch-padding: 3px;
  --ty-color-picker-swatch-radius: var(--ty-border-radius);
  --ty-color-picker-border: var(--ty-color-border);
  --ty-color-picker-bg: var(--ty-color-bg-container);
  --ty-color-picker-panel-padding: 12px;
  --ty-color-picker-panel-radius: 8px;
  --ty-color-picker-panel-shadow: var(--ty-shadow-popup);
  --ty-color-picker-panel-width: 240px;
  --ty-color-picker-spectrum-height: 150px;
  --ty-color-picker-spectrum-radius: 4px;
  --ty-color-picker-spectrum-white: linear-gradient(to right, #fff, transparent);
  --ty-color-picker-spectrum-black: linear-gradient(to bottom, transparent, #000);
  --ty-color-picker-spectrum-handle-size: 12px;
  --ty-color-picker-handle-border-width: 2px;
  --ty-color-picker-handle-border-color: #fff;
  --ty-color-picker-handle-shadow: 0 0 2px rgb(0 0 0 / 30%);
  --ty-color-picker-controls-gap: 8px;
  --ty-color-picker-controls-margin-top: 12px;
  --ty-color-picker-preview-size: 28px;
  --ty-color-picker-preview-radius: 50%;
  --ty-color-picker-slider-height: 12px;
  --ty-color-picker-slider-radius: 6px;
  --ty-color-picker-alpha-grid-size: 8px;
  --ty-color-picker-slider-handle-size: 14px;
  --ty-color-picker-input-row-gap: 6px;
  --ty-color-picker-input-row-margin-top: 12px;
  --ty-color-picker-button-padding: 2px 6px;
  --ty-color-picker-button-font-size: 12px;
  --ty-color-picker-button-color: var(--ty-color-text);
  --ty-color-picker-button-border-hover: var(--ty-color-primary);
  --ty-color-picker-input-padding: 2px 6px;
  --ty-color-picker-input-font-size: 12px;
  --ty-color-picker-input-color: var(--ty-color-text);
  --ty-color-picker-input-font-family: var(--ty-font-family-monospace);
  --ty-color-picker-input-border-focus: var(--ty-color-primary);
  --ty-color-picker-presets-gap: 6px;
  --ty-color-picker-presets-margin-top: 12px;
  --ty-color-picker-presets-padding-top: 12px;
  --ty-color-picker-preset-size: 20px;
  --ty-color-picker-preset-hover-scale: 1.2;
  --ty-color-picker-preset-transition-duration: 150ms;
}

[data-tiny-theme='dark'] {
  --ty-color-picker-opacity-disabled: 0.5;
  --ty-color-picker-swatch-size: 32px;
  --ty-color-picker-swatch-padding: 3px;
  --ty-color-picker-swatch-radius: var(--ty-border-radius);
  --ty-color-picker-border: var(--ty-color-border);
  --ty-color-picker-bg: var(--ty-color-bg-container);
  --ty-color-picker-panel-padding: 12px;
  --ty-color-picker-panel-radius: 8px;
  --ty-color-picker-panel-shadow: var(--ty-shadow-popup);
  --ty-color-picker-panel-width: 240px;
  --ty-color-picker-spectrum-height: 150px;
  --ty-color-picker-spectrum-radius: 4px;
  --ty-color-picker-spectrum-white: linear-gradient(to right, #fff, transparent);
  --ty-color-picker-spectrum-black: linear-gradient(to bottom, transparent, #000);
  --ty-color-picker-spectrum-handle-size: 12px;
  --ty-color-picker-handle-border-width: 2px;
  --ty-color-picker-handle-border-color: #fff;
  --ty-color-picker-handle-shadow: 0 0 2px rgb(0 0 0 / 30%);
  --ty-color-picker-controls-gap: 8px;
  --ty-color-picker-controls-margin-top: 12px;
  --ty-color-picker-preview-size: 28px;
  --ty-color-picker-preview-radius: 50%;
  --ty-color-picker-slider-height: 12px;
  --ty-color-picker-slider-radius: 6px;
  --ty-color-picker-alpha-grid-size: 8px;
  --ty-color-picker-slider-handle-size: 14px;
  --ty-color-picker-input-row-gap: 6px;
  --ty-color-picker-input-row-margin-top: 12px;
  --ty-color-picker-button-padding: 2px 6px;
  --ty-color-picker-button-font-size: 12px;
  --ty-color-picker-button-color: var(--ty-color-text);
  --ty-color-picker-button-border-hover: var(--ty-color-primary);
  --ty-color-picker-input-padding: 2px 6px;
  --ty-color-picker-input-font-size: 12px;
  --ty-color-picker-input-color: var(--ty-color-text);
  --ty-color-picker-input-font-family: var(--ty-font-family-monospace);
  --ty-color-picker-input-border-focus: var(--ty-color-primary);
  --ty-color-picker-presets-gap: 6px;
  --ty-color-picker-presets-margin-top: 12px;
  --ty-color-picker-presets-padding-top: 12px;
  --ty-color-picker-preset-size: 20px;
  --ty-color-picker-preset-hover-scale: 1.2;
  --ty-color-picker-preset-transition-duration: 150ms;
}

@media (prefers-color-scheme: dark) {
  [data-tiny-theme='system'] {
  --ty-color-picker-opacity-disabled: 0.5;
  --ty-color-picker-swatch-size: 32px;
  --ty-color-picker-swatch-padding: 3px;
  --ty-color-picker-swatch-radius: var(--ty-border-radius);
  --ty-color-picker-border: var(--ty-color-border);
  --ty-color-picker-bg: var(--ty-color-bg-container);
  --ty-color-picker-panel-padding: 12px;
  --ty-color-picker-panel-radius: 8px;
  --ty-color-picker-panel-shadow: var(--ty-shadow-popup);
  --ty-color-picker-panel-width: 240px;
  --ty-color-picker-spectrum-height: 150px;
  --ty-color-picker-spectrum-radius: 4px;
  --ty-color-picker-spectrum-white: linear-gradient(to right, #fff, transparent);
  --ty-color-picker-spectrum-black: linear-gradient(to bottom, transparent, #000);
  --ty-color-picker-spectrum-handle-size: 12px;
  --ty-color-picker-handle-border-width: 2px;
  --ty-color-picker-handle-border-color: #fff;
  --ty-color-picker-handle-shadow: 0 0 2px rgb(0 0 0 / 30%);
  --ty-color-picker-controls-gap: 8px;
  --ty-color-picker-controls-margin-top: 12px;
  --ty-color-picker-preview-size: 28px;
  --ty-color-picker-preview-radius: 50%;
  --ty-color-picker-slider-height: 12px;
  --ty-color-picker-slider-radius: 6px;
  --ty-color-picker-alpha-grid-size: 8px;
  --ty-color-picker-slider-handle-size: 14px;
  --ty-color-picker-input-row-gap: 6px;
  --ty-color-picker-input-row-margin-top: 12px;
  --ty-color-picker-button-padding: 2px 6px;
  --ty-color-picker-button-font-size: 12px;
  --ty-color-picker-button-color: var(--ty-color-text);
  --ty-color-picker-button-border-hover: var(--ty-color-primary);
  --ty-color-picker-input-padding: 2px 6px;
  --ty-color-picker-input-font-size: 12px;
  --ty-color-picker-input-color: var(--ty-color-text);
  --ty-color-picker-input-font-family: var(--ty-font-family-monospace);
  --ty-color-picker-input-border-focus: var(--ty-color-primary);
  --ty-color-picker-presets-gap: 6px;
  --ty-color-picker-presets-margin-top: 12px;
  --ty-color-picker-presets-padding-top: 12px;
  --ty-color-picker-preset-size: 20px;
  --ty-color-picker-preset-hover-scale: 1.2;
  --ty-color-picker-preset-transition-duration: 150ms;
}
}