@use "../../../bulma/sass/utilities" as bulma-utilities;

$colorpicker-radius: var(--dropdown-content-radius) !default;
$colorpicker-hue-selected-stroke: var(--primary) !default;

// Map Local variables
$-css-vars-map: (
    "colorpicker-radius": $colorpicker-radius,
    "colorpicker-hue-selected-stroke": $colorpicker-hue-selected-stroke,
);

// Register CSS Variables
@include bulma-utilities.exportCSSVars($-css-vars-map);
@include bulma-utilities.registerComponentCSSVars("colorpicker", $-css-vars-map);

// TODO: submit PR to rename to b-colorpicker
.b-colorpicker, .colorpicker {
    .color-name {
        font-family: var(--family-monospace);
        text-transform: uppercase;
    }

    .colorpicker-footer {
        padding-top: .875rem;
        margin-top: .875rem;
        border: 1px solid var(--grey-lighter);
        border-width: 1px 0 0;

        .colorpicker-fields {
            margin-bottom: .875rem;

            .field {
                flex-grow: 1;

                .field-label {
                    margin-right: .5rem;
                }

                .control {
                    display: flex;

                    .input {
                        flex-grow: 1;
                        width: 0;
                        min-width: 42px;
                        text-align: right;
                        appearance: none;
                        appearance: textfield;
                        appearance: textfield;

                        &::-webkit-outer-spin-button,
                        &::-webkit-inner-spin-button {
                            margin: 0;
                            appearance: none;
                        }
                    }
                }
            }
        }
    }

    .dropdown.is-expanded .dropdown-menu,
    .dropdown.is-expanded.is-mobile-modal .dropdown-menu {
        width: unset;
    }

    .dropdown-horizontal-colorpicker {
        display: flex;
        flex-direction: row;

        .colorpicker-footer {
            padding-top: 0;
            padding-left: .875rem;
            margin-top: 0;
            margin-left: .875rem;
            border-width: 0 0 0 1px;
        }
    }
}

svg.b-colorpicker-triangle {
    width: 200px;
    height: 200px;

    @extend %unselectable;

    @include bulma-utilities.mobile {
        width: 100%;
        height: auto;
    }

    .colorpicker-triangle-hue {
        width: 100%;
        height: 100%;
        background:
            conic-gradient(
                #ff0000,
                #ffff00,
                #00ff00,
                #00ffff,
                #0000ff,
                #ff00ff,
                #ff0000
            );
    }

    .colorpicker-triangle-slider {
        &-hue,
        &-sl {
            &,
            & foreignObject,
            & g {
                transform-origin: 50% 50%;
            }
        }
    }

    .hue-range-thumb,
    .sl-range-thumb {
        width: calc(100% / 1 - .25em / 1);
        height: calc(100% / 1 - .25em / 1);
        margin: .125em;
        cursor: grab;
        background: transparent;
        border-radius: var(--colorpicker-radius);
        box-shadow:
            inset 0 0 0 1px #ffffff,
            0 0 0 1px var(--grey-lighter);

        &:hover {
            box-shadow:
                inset 0 0 0 1px #ffffff,
                0 0 0 1px var(--grey-light);
        }

        &:focus {
            box-shadow:
                inset 0 0 0 1px #ffffff,
                0 0 0 1px var(--colorpicker-hue-selected-stroke);

            // 0 0 0 .125em rgba($colorpicker-hue-selected-stroke, .25);
        }

        &:active {
            cursor: grabbing;
        }
    }
}

div.b-colorpicker-square {
    position: relative;
    aspect-ratio: 1/1;

    @extend %unselectable;

    .colorpicker-square-slider-hue {
        position: absolute;
        inset: 0;
        background:
            conic-gradient(
                #ff0000,
                #ffff00,
                #00ff00,
                #00ffff,
                #0000ff,
                #ff00ff,
                #ff0000
            );
        border-radius: var(--colorpicker-radius);

        .hue-range-thumb {
            position: absolute;
            aspect-ratio: 1 / 1;
            cursor: grab;
            border-radius: calc(var(--colorpicker-radius) / 1.75);
            box-shadow:
                inset 0 0 0 1px #ffffff,
                0 0 0 1px var(--grey-lighter);
            transform: translate(-50%, -50%);

            &:hover {
                box-shadow:
                    inset 0 0 0 1px #ffffff,
                    inset 0 0 0 2px var(--grey-light),
                    0 0 0 1px var(--grey-light);
            }

            &:focus {
                box-shadow:
                    inset 0 0 0 1px #ffffff,
                    0 0 0 1px var(--colorpicker-hue-selected-stroke);

                // 0 0 0 .125em rgba($colorpicker-hue-selected-stroke, .25);
            }

            &:active {
                cursor: grabbing;
            }
        }
    }

    .colorpicker-square-slider-sl {
        position: absolute;
        inset: 0;
        background: #ffffff;
        border-radius: calc(var(--colorpicker-radius) / 2);

        &::before {
            position: absolute;
            inset: 0;
            content: "";
            background: linear-gradient(0deg, #000000, #ffffff);
            mix-blend-mode: hard-light;
        }

        .sl-range-thumb {
            position: absolute;
            display: block;
            width: 8px;
            height: 8px;
            cursor: grab;
            border-radius: var(--colorpicker-radius);
            box-shadow:
                inset 0 0 0 1px #ffffff,
                0 0 0 1px var(--grey-lighter);
            transform: translate(-50%, -50%);

            &:hover {
                box-shadow:
                    inset 0 0 0 1px #ffffff,
                    inset 0 0 0 2px var(--grey-light),
                    0 0 0 1px var(--grey-light);
            }

            &:focus {
                box-shadow:
                    inset 0 0 0 1px #ffffff,
                    0 0 0 1px var(--colorpicker-hue-selected-stroke);

                // 0 0 0 .125em rgba($colorpicker-hue-selected-stroke, .25);
            }

            &:active {
                cursor: grabbing;
            }
        }
    }
}

.b-colorpicker-alpha-slider {
    position: relative;
    height: 1em;
    margin-top: .125em;
    margin-bottom: .875rem;
    background-image:
        linear-gradient(45deg, #c7c7c7 25%, transparent 25%, transparent 75%, #c7c7c7 75%, #c7c7c7),
        linear-gradient(45deg, #c7c7c7 25%, transparent 25%, transparent 75%, #c7c7c7 75%, #c7c7c7);
    background-position: .5em .5em, 0 0;
    background-size: 1em 1em;
    border-radius: var(--colorpicker-radius);

    .alpha-range-thumb {
        position: absolute;
        top: 50%;
        left: 0;
        width: .4em;
        height: 1.25em;
        cursor: grab;
        border-radius: var(--colorpicker-radius);
        box-shadow:
            inset 0 0 0 1px #ffffff,
            inset 0 0 0 2px var(--grey-lighter),
            0 0 0 1px var(--grey-lighter);
        transform: translate(-50%, -50%);

        &:hover {
            box-shadow:
                inset 0 0 0 1px #ffffff,
                inset 0 0 0 2px var(--grey-light),
                0 0 0 1px var(--grey-light);
        }

        &:focus {
            box-shadow:
                inset 0 0 0 1px #ffffff,
                0 0 0 1px var(--colorpicker-hue-selected-stroke);

            // 0 0 0 .125em rgba($colorpicker-hue-selected-stroke, .25);
        }

        &:active {
            cursor: grabbing;
        }

        & > .b-tooltip {
            &,
            &> .tooltip-trigger {
                position: absolute;
                inset: 0;
                display: block;
            }
        }
    }
}