leptonic-color-preview {
    display: flex;
    // These are default values for width and height, intended to only take effect when not otherwise specified. Values should be specified based on usage / context.
    width: 10em;
    height: 10em;
    forced-color-adjust: none;
}

.leptonic-color-palette {
    &:before {
        --color-palette-click-container-displacement: calc(var(--color-palette-knob-size) * -0.5);
        content: "";
        display: block;
        position: absolute;
        z-index: 1;
        width: calc(100% + var(--color-palette-knob-size));
        height: calc(100% + var(--color-palette-knob-size));
        border-radius: 0;
        top: var(--color-palette-click-container-displacement);
        left: var(--color-palette-click-container-displacement);
        opacity: 0;
        transition: all var(--color-palette-knob-transition-speed);
        touch-action: none;
        user-select: none;
    }

    display: flex;
    position: relative;
    // These are default values for width and height, intended to only take effect when not otherwise specified. Values should be specified based on usage / context.
    width: 10em;
    height: 10em;
    forced-color-adjust: none;
    cursor: pointer;
    touch-action: none;
    user-select: none;

    leptonic-color-palette-knob-wrapper {
        display: flex;
        align-items: center;
        position: absolute;
        width: 100%;
        height: 100%;
        left: calc(var(--color-palette-knob-size) * -0.5);
        bottom: calc(var(--color-palette-knob-size) * -0.5);
    }

    leptonic-color-palette-knob {
        &:before {
            --color-palette-knob-halo-displacement: calc((var(--color-palette-knob-halo-size) / 2.0 - (var(--color-palette-knob-size) - 2.0 * var(--color-palette-knob-border-width)) / 2.0) * -1.0);
            content: "";
            display: block;
            position: absolute;
            width: var(--color-palette-knob-halo-size);
            height: var(--color-palette-knob-halo-size);
            border-radius: var(--color-palette-knob-halo-size);
            top: var(--color-palette-knob-halo-displacement);
            left: var(--color-palette-knob-halo-displacement);
            background-color: var(--color-palette-knob-halo-background-color);
            opacity: 0;
            transition: all var(--color-palette-knob-transition-speed);
        }

        &:hover,
        &:active,
        &:focus,
        &.is-dragged {
            &:before {
                opacity: var(--color-palette-knob-halo-opacity);
            }
        }

        &.is-dragged {
            &:before {
                --color-palette-knob-halo-displacement: calc((var(--color-palette-knob-halo-size-while-dragged) / 2.0 - (var(--color-palette-knob-size) - 2.0 * var(--color-palette-knob-border-width)) / 2.0) * -1.0);
                width: var(--color-palette-knob-halo-size-while-dragged);
                height: var(--color-palette-knob-halo-size-while-dragged);
                border-radius: var(--color-palette-knob-halo-size-while-dragged);
                top: var(--color-palette-knob-halo-displacement);
                left: var(--color-palette-knob-halo-displacement);
            }
        }

        content: "";
        position: absolute;
        z-index: 1;
        height: var(--color-palette-knob-size);
        width: var(--color-palette-knob-size);
        border-width: var(--color-palette-knob-border-width);
        border-style: var(--color-palette-knob-border-style);
        border-color: var(--color-palette-knob-border-color);
        background-color: var(--color-palette-knob-background-color);
        box-shadow: var(--color-palette-knob-box-shadow);
        transition: 0s;
        // The knob position is determined by setting the "left" attribute programmatically with a percentage value.

        &[data-variant="round"] {
            border-radius: calc(var(--color-palette-knob-size) * 0.5);
        }
    }
}

leptonic-hue-slider leptonic-slider {
    --slider-range-height: 0.75em;
    --slider-range-background-color: transparent;

    --slider-bar-height: 0.75em;
    --slider-bar-background-image: linear-gradient(to right,
            rgb(255, 0, 0) 0%,
            rgb(255, 255, 0) 17%,
            rgb(0, 255, 0) 33%,
            rgb(0, 255, 255) 50%,
            rgb(0, 0, 255) 67%,
            rgb(255, 0, 255) 83%,
            rgb(255, 0, 0) 100%);

    --slider-knob-border-width: 0.25em;
    --slider-knob-border-style: solid;
    --slider-knob-border-color: white;

    forced-color-adjust: none;
}