/* Manifest Color Picker */

@layer base, components, utilities;

/* mnfst:popover-base:start — self-contained so this stylesheet works on
   its own; the build strips it from manifest.css. Edit styles/snippets/manifest.popover.css. */
[popover]:not(.unstyle):not(:popover-open) {
    display: none;
}

@layer base {

    /* Animates `scale`, not `transform`. With fill mode `both` a transform
       animation keeps its final value forever, which silently overrides any
       transform an author put on a popover — so a menu positioned with
       translate(-50%) simply would not move. The standalone property leaves
       transform free. */
    @keyframes mnfst-popover-in {
        from {
            scale: .9
        }

        to {
            scale: 1
        }
    }

    :where([popover]):not(.unstyle):popover-open {
        display: flex;
        animation: mnfst-popover-in .15s ease-in both
    }
}
/* mnfst:popover-base:end */

:root {
    --color-picker-swatch: var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
    --icon-color-solid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-paint-roller-icon lucide-paint-roller'%3E%3Crect width='16' height='6' x='2' y='2' rx='2'/%3E%3Cpath d='M10 16v-2a2 2 0 0 1 2-2h8a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2'/%3E%3Crect width='4' height='6' x='8' y='16' rx='1'/%3E%3C/svg%3E");
    --icon-color-gradient: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-blend-icon lucide-blend'%3E%3Ccircle cx='9' cy='9' r='7'/%3E%3Ccircle cx='15' cy='15' r='7'/%3E%3C/svg%3E");
    --icon-color-library: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-swatch-book-icon lucide-swatch-book'%3E%3Cpath d='M11 17a4 4 0 0 1-8 0V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2Z'/%3E%3Cpath d='M16.7 13H19a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H7'/%3E%3Cpath d='M 7 17h.01'/%3E%3Cpath d='m11 8 2.3-2.3a2.4 2.4 0 0 1 3.404.004L18.6 7.6a2.4 2.4 0 0 1 .026 3.434L9.9 19.8'/%3E%3C/svg%3E");
    --icon-color-grab: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-pipette-icon lucide-pipette'%3E%3Cpath d='m12 9-8.414 8.414A2 2 0 0 0 3 18.828v1.344a2 2 0 0 1-.586 1.414A2 2 0 0 1 3.828 21h1.344a2 2 0 0 0 1.414-.586L15 12'/%3E%3Cpath d='m18 9 .4.4a1 1 0 1 1-3 3l-3.8-3.8a1 1 0 1 1 3-3l.4.4 3.4-3.4a1 1 0 1 1 3 3z'/%3E%3Cpath d='m2 22 .414-.414'/%3E%3C/svg%3E");
    --icon-alpha-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Crect width='1' height='1' x='0' y='0' fill='%23808080' opacity='0.15'/%3E%3Crect width='1' height='1' x='1' y='1' fill='%23808080' opacity='0.15'/%3E%3C/svg%3E");
}

@layer components {

    :where(input[type="color"]) {
        appearance: none;
        -webkit-appearance: none;

        &::-webkit-color-swatch-wrapper {
            padding: 0;
        }

        &::-webkit-color-swatch {
            border: 0 none
        }

        &::-moz-color-swatch {
            border: 0 none
        }
    }
}

@layer utilities {

    /* Swatch trigger button */
    :where([x-colorpicker\.swatch], input[type="color"]):not(.unstyle) {
        position: relative;
        width: var(--spacing-field-height, 2.25rem);
        min-width: var(--spacing-field-height, 2.25rem);
        max-width: var(--spacing-field-height, 2.25rem);
        height: var(--spacing-field-height, 2.25rem);
        padding: 0;
        background: var(--color-picker-swatch, #000000);
        border-width: 1px;
        border-style: solid;
        border-color: oklch(from var(--color-picker-swatch, #000000) calc(l + (0.5 - l) * 0.35) c calc(h + 0));
        border-radius: var(--radius, 0.5rem);
        cursor: pointer;
        overflow: hidden;
        transition: var(--transition, all .05s ease-in-out);

        &:hover,
        &:active,
        &:focus,
        &:focus-visible {
            border-color: oklch(from var(--color-picker-swatch, #000000) calc(l + (0.5 - l) * 0.35) c calc(h + 0) / 0.5)
        }

        /* Alpha pattern background */
        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background-image: var(--icon-alpha-pattern);
            background-size: 50%;
            background-position: top left
        }
    }

    /* Color picker menu interface */
    :where([x-colorpicker]):not(.unstyle) {
        min-width: 18rem;
        max-width: 18rem;
        max-height: 30rem;
        height: fit-content;
        overflow: hidden;

        /* Tabs wrapper */
        & :where(.tabs-wrapper) {
            display: flex;
            width: 100%;
            padding: 2px;
            border-bottom: 1px solid var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));

            /* Distribute button widths equally */
            & button {
                flex: 1;
                justify-content: center
            }
        }

        /* Solid options */
        & [x-colorpicker\.solid] {

            /* Canvas wrapper */
            & :where(.canvas-wrapper) {
                position: relative;
                width: 100%;
                padding: 2px;
                aspect-ratio: 1;
                overflow: hidden;
                cursor: crosshair;
                touch-action: none
            }

            /* Canvas (SV plane) */
            & canvas {
                display: block;
                width: 100%;
                height: 100%
            }

            /* Canvas reticle indicator */
            & :where(.color-reticle) {
                position: absolute;
                width: 0.75rem;
                height: 0.75rem;
                z-index: 1;
                border: 2px solid #ffffff;
                border-radius: 50%;
                box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.2);
                transform: translate(-50%, -50%);
                pointer-events: none
            }

            & :where(.solid-options-inputs) {
                display: flex;
                flex-direction: column;
                gap: 0.75rem;
                padding: 0.75rem;

                & div:has(button[x-colorpicker\.set-color-space], input[x-colorpicker\.set-color-value], input[x-colorpicker\.set-alpha-value]) {
                    display: flex;
                    width: 100%
                }
            }

            /* Shared range styles */
            & input[x-colorpicker\.set-hue],
            & input[x-colorpicker\.set-alpha] {
                width: 100%;
                height: 0.75rem;
                padding: 0;
                border-radius: 1rem;
                appearance: none;
                -webkit-appearance: none;
                cursor: pointer;
                outline: none;
                border: none;
                background: transparent;

                /* Webkit thumb */
                &::-webkit-slider-thumb {
                    -webkit-appearance: none;
                    width: 1rem;
                    height: 1rem;
                    border-radius: 50%;
                    background: #ffffff;
                    border: 2px solid #ffffff;
                    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.25);
                    cursor: grab;

                    &:active {
                        cursor: grabbing
                    }
                }

                /* Firefox thumb */
                &::-moz-range-thumb {
                    width: 1rem;
                    height: 1rem;
                    border-radius: 50%;
                    background: #ffffff;
                    border: 2px solid #ffffff;
                    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.25);
                    cursor: grab;

                    &:active {
                        cursor: grabbing
                    }
                }

                /* Webkit track */
                &::-webkit-slider-runnable-track {
                    height: 0.75rem;
                    border-radius: 1rem
                }

                /* Firefox track */
                &::-moz-range-track {
                    height: 0.75rem;
                    border-radius: 1rem
                }
            }

            /* Hue range */
            & input[x-colorpicker\.set-hue] {
                &::-webkit-slider-runnable-track {
                    background: linear-gradient(to right,
                            hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%),
                            hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%),
                            hsl(360 100% 50%))
                }

                &::-moz-range-track {
                    background: linear-gradient(to right,
                            hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%),
                            hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%),
                            hsl(360 100% 50%))
                }
            }

            /* Alpha range */
            & input[x-colorpicker\.set-alpha] {
                --color-picker-alpha: rgb(0, 0, 0);
                position: relative;

                &::-webkit-slider-runnable-track {
                    background:
                        linear-gradient(to right, transparent, var(--color-picker-alpha)),
                        var(--icon-alpha-pattern) 0 0 / 0.5rem 0.5rem
                }

                &::-moz-range-track {
                    background:
                        linear-gradient(to right, transparent, var(--color-picker-alpha)),
                        var(--icon-alpha-pattern) 0 0 / 0.5rem 0.5rem
                }
            }

            /* Color space button */
            & button[x-colorpicker\.set-color-space] {
                justify-content: center;
                width: 7ch;
                padding-inline-start: 0;
                padding-inline-end: 0
            }

            /* Color value input */
            & input[x-colorpicker\.set-color-value] {
                flex: 1;
                padding-inline-end: 0
            }

            /* Alpha value input */
            & input[x-colorpicker\.set-alpha-value] {
                width: fit-content;
                padding-inline-start: 0;
                text-align: end
            }
        }

        /* Gradients */
        & [x-colorpicker\.gradient] {

            /* Gradient layers */
            & :where(.layer-options-wrapper) {
                border-bottom: 1px solid var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));

                /* Layer options inputs */
                & :where(.layer-options-inputs) {
                    display: flex;
                    flex-flow: row nowrap;
                    align-items: center;
                    padding: 0.5rem;

                    /* Gradient options drodown button */
                    & button {
                        width: auto;
                        justify-content: center
                    }

                    /* Gradient angle input wrapper */
                    & :where(.layer-angle-wrapper) {
                        position: relative;

                        /* Gradient angle input */
                        & input[x-colorpicker\.set-angle] {
                            width: 5.5ch;
                            cursor: ew-resize;
                            padding-inline-start: 0;
                            padding-inline-end: 0.75rem;
                            text-align: end;

                            &:focus {
                                cursor: text
                            }
                        }

                        /* Degree symbol */
                        & span {
                            position: absolute;
                            top: 0;
                            right: 0.25rem;
                            color: var(--color-content-neutral, oklch(43.9% 0 0))
                        }
                    }

                    /* Gradient stop bar */
                    & [x-colorpicker\.layer-stops-bar] {
                        position: relative;
                        width: 100%;
                        height: 0.75rem;
                        margin-inline-start: 1rem;
                        margin-inline-end: 0.5rem;
                        border-radius: 1rem;
                        cursor: pointer;
                        background: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));

                        /* Stop handle */
                        & :where(.stop-handle) {
                            position: absolute;
                            top: 50%;
                            width: 1rem;
                            height: 1rem;
                            border-radius: 50%;
                            border: 2px solid #ffffff;
                            box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.25);
                            transform: translate(-50%, -50%);
                            cursor: grab;
                            z-index: 1;
                            touch-action: none;

                            &:hover {
                                box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 5px rgba(0, 0, 0, 0.25)
                            }

                            &:active {
                                cursor: grabbing
                            }

                            &.active {
                                box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.85), 0 1px 5px rgba(0, 0, 0, 1)
                            }

                        }
                    }
                }

                /* Per-stop solid panel */
                & [x-colorpicker\.solid] {
                    padding: 0;

                    & :where(.canvas-wrapper) {
                        width: calc(100% - 2rem);
                        margin: auto;
                        padding: 0 0 2px 0
                    }

                    & :where(.solid-options-inputs) {
                        padding-left: 1rem;
                        padding-right: 1rem
                    }
                }
            }

            /* Gradient value wrapper */
            & :where(.gradient-value-wrapper) {
                padding: 0.5rem;

                /* Gradient value input */
                & [x-colorpicker\.set-gradient-value] {
                    resize: none;
                    field-sizing: content
                }
            }
        }

        /* Hide gradient angle input when the gradient type doesn't use it (holds space via visibility) */
        & [data-gradient-type="radial"] .layer-angle-wrapper {
            visibility: hidden
        }

        /* Library */
        & [x-colorpicker\.library] {
            max-height: 30rem;
            overflow-y: auto;

            /* Library wrapper */
            & :where(.library-wrapper) {
                display: flex;
                flex-flow: column;
                gap: 1rem;
                width: 100%;
                padding: 1rem 1rem 4rem 1rem;

                /* Group wrapper */
                & :where(.library-group) {
                    display: flex;
                    flex-direction: column;
                    width: 100%;
                    padding-bottom: 1rem;
                    gap: 0.5rem;

                    /* Only apply border to all except last library-group */
                    &:not(:last-child) {
                        border-bottom: 1px solid var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
                    }

                    /* Palette wrapper */
                    & :where(.library-palette) {
                        display: grid;
                        grid-template-columns: repeat(11, 1fr);
                        gap: 1px;

                        /* Swatch buttons */
                        & button[x-colorpicker\.apply-color] {
                            min-width: 0;
                            width: 100%;
                            max-width: 1.375rem;
                            min-height: 0;
                            height: auto;
                            max-height: 1.375rem;
                            aspect-ratio: 1/1;
                            border-radius: calc(var(--radius, 0.5rem) / 2);
                            border: 1px solid rgba(255, 255, 255, 0.15);

                            &:hover {
                                border: 1px solid rgba(255, 255, 255, 0.35)
                            }

                            &.active {
                                border: 1px solid rgba(255, 255, 255, 1);
                                box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.85), 0 0 1px rgba(0, 0, 0, 1), inset 0 0 0 4px rgba(0, 0, 0, 0.25)
                            }
                        }
                    }
                }
            }
        }
    }

    /* Colorpicker inside dropdown menu */
    :where(menu[popover][x-colorpicker]:not(.unstyle)) {
        padding: 0;

        & .tabs-wrapper button {
            border: 1px solid var(--color-popover-surface, oklch(98.5% 0 0))
        }
    }

    /* Library wrapper inside dropdown menu */
    :where(menu[popover]:not(.unstyle) [x-colorpicker\.library], .dropdown-menu:not(.unstyle) [x-colorpicker\.library]) {
        /* max-height: initial !important;
        overflow: visible !important; */

        & :where(.library-wrapper) {
            padding: 0.5rem 0.5rem 4rem 0.5rem !important;

        }

        & :where(small) {
            padding-inline-start: 0
        }
    }

    /* Colorpicker button icons */
    :where(.color-icon-solid, .color-icon-gradient, .color-icon-library, .color-icon-grab, .gradient-layer-icon-linear, .gradient-layer-icon-radial, .gradient-layer-icon-conic) {
        height: calc(var(--spacing-field-height, 2.25rem) / 2);
        max-height: 1rem;
        aspect-ratio: 1/1;
        background-color: currentColor
    }

    /* Colorpicker dialog */
    :where(dialog[x-colorpicker]) {
        border-radius: calc(var(--radius, 0.5rem))
    }

    :where(.color-icon-solid) {
        mask-image: var(--icon-color-solid)
    }

    :where(.color-icon-gradient) {
        mask-image: var(--icon-color-gradient)
    }

    :where(.color-icon-library) {
        mask-image: var(--icon-color-library)
    }

    :where(.color-icon-grab) {
        mask-image: var(--icon-color-grab)
    }

    .gradient-layer-icon-linear {
        background: linear-gradient(to right, var(--color-content-neutral, oklch(43.9% 0 0)), color-mix(in oklch, var(--color-content-neutral, oklch(43.9% 0 0)) 0%, transparent 100%));
        border-radius: 50%
    }

    .gradient-layer-icon-radial {
        background: radial-gradient(var(--color-content-neutral, oklch(43.9% 0 0)), color-mix(in oklch, var(--color-content-neutral, oklch(43.9% 0 0)) 0%, transparent 100%));
        border-radius: 50%
    }

    .gradient-layer-icon-conic {
        background: conic-gradient(var(--color-content-neutral, oklch(43.9% 0 0)), color-mix(in oklch, var(--color-content-neutral, oklch(43.9% 0 0)) 0%, transparent 100%));
        border-radius: 50%
    }
}