/**
 * color-alpha-picker.css
 * Estilos do componente reutilizável "cor + opacidade" — ver
 * js/core/color-alpha-picker.js. Usado só no editor (nunca no export —
 * é um controlo de painel, não faz parte do widget publicado).
 */
.color-alpha-picker {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Ambos os campos dividem a largura TOTAL do painel a 50/50 (flex-basis
   0 + flex-grow igual em ambos) — sem isto, o campo de texto encolhia
   para caber só o conteúdo e sobrava um vazio enorme à direita, porque
   nada no container reclamava esse espaço. */
.color-alpha-picker__swatch {
    height: 32px;
    flex: 1 1 0;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 0;
}

.color-alpha-picker__code {
    flex: 1 1 0;
    min-width: 0;
}

/* Linha "borda completa" (cor+opacidade + espessura) — ver attachBorder
   em color-alpha-picker.js. Os 3 campos (swatch, código, espessura)
   dividem o espaço a 1/3 cada um — por isso o swatch e o código, aqui
   dentro, deixam de usar o 50/50 que têm sozinhos (.color-alpha-picker) e
   passam a 1/2 do 2/3 que sobram ao wrapper do color-alpha-picker. */
.color-alpha-picker__border-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.color-alpha-picker__border-row > div:first-child {
    flex: 2 1 0;
    min-width: 0;
}

.color-alpha-picker__border-width {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 0;
    min-width: 0;
}

.color-alpha-picker__border-width input {
    flex: 1 1 0;
    min-width: 0;
}

.color-alpha-picker__border-width span {
    font-size: 11px;
    color: var(--text-secondary);
}

/* ---------------------------------------------------------------------
   Popup — replica o aspeto do color picker nativo do Windows 11: área
   grande de saturação/luminosidade, barra de matiz, barra de opacidade,
   conta-gotas + mini-swatch, campos R/G/B/A.
   --------------------------------------------------------------------- */
.color-alpha-picker__popup {
    z-index: 10000;
    width: 280px;
    display: flex;
    flex-direction: column;
    background: var(--bg-panel, #1e1e1e);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
    overflow: hidden;
}

/* Área 2D: eixo X = saturação (branco→matiz puro), eixo Y = luminosidade
   (matiz puro→preto) — duas camadas de gradiente sobrepostas, ambas
   dependentes de --hue (custom property atualizada em JS). */
.color-alpha-picker__sat-area {
    position: relative;
    width: 100%;
    height: 160px;
    cursor: crosshair;
    background:
        linear-gradient(to top, #000, transparent),
        linear-gradient(to right, #fff, hsl(var(--hue, 0), 100%, 50%));
}

.color-alpha-picker__sat-handle {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 1px 4px rgba(0, 0, 0, .5);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.color-alpha-picker__controls-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
}

.color-alpha-picker__eyedropper {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
}

.color-alpha-picker__eyedropper:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.color-alpha-picker__mini-swatch {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border);
}

.color-alpha-picker__sliders-col {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.color-alpha-picker__hue-track {
    position: relative;
    height: 12px;
    border-radius: 99rem;
    cursor: pointer;
    background: linear-gradient(to right,
        #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}

.color-alpha-picker__alpha-track {
    position: relative;
    height: 12px;
    border-radius: 99rem;
    cursor: pointer;
    /* Xadrez por trás do gradiente de alpha — aqui faz sentido (é a
       PRÓPRIA barra que representa opacidade), ao contrário do swatch
       principal que nunca deve mostrá-lo. */
    background:
        repeating-conic-gradient(#8888888a 0% 25%, transparent 0% 50%) 50% / 8px 8px;
    overflow: hidden;
}

.color-alpha-picker__alpha-gradient {
    position: absolute;
    inset: 0;
}

.color-alpha-picker__hue-handle,
.color-alpha-picker__alpha-handle {
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .3);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.color-alpha-picker__fields-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 6px;
    padding: 0 12px 12px;
}

.color-alpha-picker__field {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.color-alpha-picker__field input {
    width: 100%;
    text-align: center;
    padding: 6px 2px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 12px;
}

.color-alpha-picker__field span {
    font-size: 10px;
    color: var(--text-muted);
}