.tab-color-picker{margin:0 auto}.tab-color-picker__input-container{position:relative}.tab-color-picker__color-box{width:100%;min-width:200px;min-height:var(--height-input);border-radius:var(--border-radius-input);border:1px solid var(--bordercolor-input);cursor:pointer;background-color:#fff;align-items:center;padding:0 8px;transition:border-color .2s;display:flex;box-shadow:0 1px 2px #0000000d}.tab-color-picker__color-box--open{border-color:#9ca3af}.tab-color-picker__color-box-content{justify-content:space-between;align-items:center;width:100%;display:flex}.tab-color-picker__color-box-content svg{fill:#fff}.tab-color-picker__color-label{font-size:var(--text-xs);color:#374151;background-color:#fff;border-radius:4px;padding:2px 6px;font-weight:500;box-shadow:0 1px 2px #0000001a}.tab-color-picker__popover{width:340px;z-index:var(--z-popover);background-color:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:16px;position:absolute;box-shadow:0 10px 25px #00000026}.tab-color-picker__section{margin-bottom:12px}.tab-color-picker__label{font-size:var(--text-sm);color:#374151;margin-bottom:8px;font-weight:500;display:block}.tab-color-picker__color-input{cursor:pointer;border:1px solid #d1d5db;border-radius:6px;width:100%;height:40px}.tab-color-picker__screen-picker-btn{width:100%;font-size:var(--text-sm);cursor:pointer;color:#3b82f6;background-color:#eff6ff;border:none;border-radius:6px;justify-content:center;align-items:center;gap:8px;padding:8px 12px;font-weight:500;transition:colors .2s;display:flex}.tab-color-picker__screen-picker-btn--disabled{color:#9ca3af;cursor:not-allowed;background-color:#f3f4f6}.tab-color-picker__slider{appearance:none;cursor:pointer;background-color:#e5e7eb;border-radius:4px;outline:none;width:100%;height:8px}.tab-color-picker__slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#3b82f6;border:2px solid #fff;border-radius:50%;width:20px;height:20px;box-shadow:0 2px 4px #0003}.tab-color-picker__slider::-moz-range-thumb{cursor:pointer;background:#3b82f6;border:2px solid #fff;border-radius:50%;width:20px;height:20px;box-shadow:0 2px 4px #0003}.tab-color-picker__preview{border:1px solid #e5e7eb;border-radius:6px;width:100%;height:64px;overflow:hidden}.tab-color-picker__preview-color{width:100%;height:100%}.tab-color-picker__color-grid{grid-template-columns:repeat(10,1fr);gap:4px;display:grid}.tab-color-picker__color-grid-item{cursor:pointer;background:0 0;border:2px solid #e5e7eb;border-radius:4px;width:24px;height:24px;transition:transform .2s}.tab-color-picker__color-grid-item:hover{transform:scale(1.1)}.tab-color-picker__color-grid-item--active{border-color:#374151}