@use "sass:map";
@use "../core/_index.scss" as *;
@use "./_variables.scss" as *;

@mixin kendo-color-gradient--layout() {

    // ColorGradient
    .k-colorgradient {
        @include border-radius( var( --kendo-color-gradient-border-radius, #{$kendo-color-gradient-border-radius} ) );
        width: var( --kendo-color-gradient-width, #{$kendo-color-gradient-width} );
        padding-inline: var( --kendo-color-gradient-padding-x, #{$kendo-color-gradient-padding-x} );
        padding-block: var( --kendo-color-gradient-padding-y, #{$kendo-color-gradient-padding-y} );
        border-style: solid;
        border-width: var( --kendo-color-gradient-border-width, #{$kendo-color-gradient-border-width} );
        box-sizing: border-box;
        outline: 0;
        font-size: var( --kendo-color-gradient-font-size, #{$kendo-color-gradient-font-size} );
        font-family: var( --kendo-color-gradient-font-family, #{$kendo-color-gradient-font-family} );
        line-height: var( --kendo-color-gradient-line-height, #{$kendo-color-gradient-line-height} );
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var( --kendo-color-gradient-spacing, #{$kendo-color-gradient-spacing} );
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }
    }

    // Canvas
    .k-colorgradient-canvas {
        gap: var( --kendo-color-gradient-canvas-spacing, #{$kendo-color-gradient-canvas-spacing} );

        .k-hsv-rectangle {
            @include border-radius( var( --kendo-color-gradient-canvas-border-radius, #{$kendo-color-gradient-canvas-border-radius} ) );
            border-width:  var( --kendo-color-gradient-canvas-border-width, #{$kendo-color-gradient-canvas-border-width} );
            border-style: solid;
            position: relative;
            flex: 1 1 auto;
            user-select: none;
        }

        .k-hsv-gradient {
            height: var( --kendo-color-gradient-canvas-rectangle-height, #{$kendo-color-gradient-canvas-rectangle-height} );
        }

        .k-hsv-draghandle {
            margin-block-start: var( --kendo-color-gradient-canvas-draghandle-offset-y, #{$kendo-color-gradient-canvas-draghandle-offset-y} );
            margin-inline-start: var( --kendo-color-gradient-canvas-draghandle--offset-x, #{$kendo-color-gradient-canvas-draghandle-offset-x} );
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 10;
            background-color: transparent;
            cursor: pointer;
        }

        .k-hsv-controls {
            position: relative;
            flex-shrink: 0;
            gap: var( --kendo-color-gradient-canvas-spacing, #{$kendo-color-gradient-canvas-spacing} );
        }

        &.k-vstack {
            padding-inline: calc( ($kendo-color-gradient-draghandle-width + $kendo-color-gradient-draghandle-border-width) / 2 );
        }
    }

    // DragHandle
    .k-colorgradient .k-draghandle {
        width: var( --kendo-color-gradient-draghandle-width, #{$kendo-color-gradient-draghandle-width} );
        height: var( --kendo-color-gradient-draghandle-height, #{$kendo-color-gradient-draghandle-height} );
        border-width: var( --kendo-color-gradient-draghandle-border-width, #{$kendo-color-gradient-draghandle-border-width} );
        outline-width: var( --kendo-color-gradient-draghandle-outline-width, #{$kendo-color-gradient-draghandle-outline-width} );
        outline-style: solid;
        box-sizing: border-box;
    }

    // Sliders
    .k-colorgradient-slider {

        &.k-slider-vertical {
            width: var( --kendo-color-gradient-slider-track-size, #{$kendo-color-gradient-slider-track-size} );
            height: var( --kendo-color-gradient-slider-vertical-size, #{$kendo-color-gradient-slider-vertical-size} );
            flex: 0 0 var( --kendo-color-gradient-slider-track-size, #{$kendo-color-gradient-slider-track-size} );
        }
        &.k-slider-vertical .k-slider-track {
            width: var( --kendo-color-gradient-slider-track-size, #{$kendo-color-gradient-slider-track-size} );
            border-radius: var( --kendo-color-gradient-slider-border-radius, #{$kendo-color-gradient-slider-border-radius} );

            // Required since the track is absolutely left positioned
            margin-left: calc( -1 * (var( --kendo-color-gradient-slider-track-size, #{$kendo-color-gradient-slider-track-size} ) / 2) );
        }

        &.k-slider-horizontal {
            width: var( --kendo-color-gradient-slider-horizontal-size, #{$kendo-color-gradient-slider-horizontal-size} );
            height: var( --kendo-color-gradient-slider-track-size, #{$kendo-color-gradient-slider-track-size} );
            flex: 0 0 var( --kendo-color-gradient-slider-track-size, #{$kendo-color-gradient-slider-track-size} );
        }
        &.k-slider-horizontal .k-slider-track {
            height: var( --kendo-color-gradient-slider-track-size, #{$kendo-color-gradient-slider-track-size} );
            border-radius: var( --kendo-color-gradient-slider-border-radius, #{$kendo-color-gradient-slider-border-radius} );
            margin-block-start: calc( ( var( --kendo-color-gradient-slider-track-size, #{$kendo-color-gradient-slider-track-size} ) / 2 ) * -1 );
        }

        &.k-alpha-slider .k-slider-track::before {
            content: "";
            width: 100%;
            height: 100%;
            display: block;
            border-radius: 2px;
            position: relative;
            z-index: -1;
        }

        .k-slider-track {
            border-width:  var( --kendo-color-gradient-slider-border-width, #{$kendo-color-gradient-slider-border-width} );
            border-style: solid;
            transform: none;
            z-index: auto;
        }

        .k-slider-track-wrap {
            z-index: 1;
        }

        .k-slider-selection {
            display: none;
        }

    }

    // ColorGradient sizes
    @each $size, $size-props in $kendo-color-gradient-sizes {
        $_width: map.get( $size-props, width );
        $_spacing: map.get( $size-props, spacing );
        $_vertical-slider-height: map.get( $size-props, vertical-slider-height );
        $_rectangle-height: map.get( $size-props, rectangle-height );
        $_input-width: map.get( $size-props, input-width );
        $_canvas-spacing: map.get( $size-props, canvas-spacing );
        $_padding-x: map.get( $size-props, padding-x );
        $_padding-y: map.get( $size-props, padding-y );

        .k-colorgradient-#{$size} {
            width: $_width;
            gap: $_spacing;
            padding-block: $_padding-y;
            padding-inline: $_padding-x;

            .k-colorgradient-inputs {
                .k-numerictextbox {
                    width: $_input-width;
                }
            }

            .k-colorgradient-canvas {
                gap: $_canvas-spacing;

                .k-hsv-gradient {
                    height: $_rectangle-height;
                }

                .k-slider-vertical {
                    height: $_vertical-slider-height;
                }

                .k-hsv-controls {
                    gap: $_canvas-spacing;
                }
            }
        }
    }

    // Inputs
    .k-colorgradient-inputs {
        gap: var( --kendo-color-gradient-input-spacing, #{$kendo-color-gradient-input-spacing} );

        .k-colorgradient-input-label {
            font-size: var( --kendo-color-gradient-input-label-font-size, #{$kendo-color-gradient-input-label-font-size} );
            text-transform: uppercase;
        }

        > .k-vstack {
            gap: var( --kendo-color-gradient-input-label-spacing, #{$kendo-color-gradient-input-label-spacing} );
        }

        .k-numerictextbox {
            width: var( --kendo-color-gradient-input-width, #{$kendo-color-gradient-input-width} );
        }
    }

    // Contrast
    .k-colorgradient-color-contrast {

        > div {
            display: flex;
            flex-flow: row nowrap;
            gap: var( --kendo-color-gradient-contrast-spacing, #{$kendo-color-gradient-contrast-spacing} );
        }

        .k-contrast-ratio {
            margin-block-end: var( --kendo-color-gradient-contrast-spacing, #{$kendo-color-gradient-contrast-spacing} );
        }

        .k-contrast-ratio-text {
            font-weight: var( --kendo-color-gradient-contrast-ratio-font-weight, #{$kendo-color-gradient-contrast-ratio-font-weight} );
        }

        .k-contrast-validation {
            --INTERNAL--kendo-color-gradient-contrast-spacing: var( --kendo-color-gradient-contrast-spacing,  #{$kendo-color-gradient-contrast-spacing} );
            display: inline-flex;
            align-items: center;
            gap: calc( var( --INTERNAL--kendo-color-gradient-contrast-spacing ) / 2 );

            .k-icon {
                vertical-align: middle;
            }

            // Needed for the double check icons
            .k-icon + .k-icon,
            .k-icon-wrapper-host + .k-icon-wrapper-host .k-icon {
                margin-inline-start: -13px;
            }
        }
    }
    .k-color-contrast-svg {
        position: absolute;
        top: 0;
        left: 0;
        overflow: visible;
        pointer-events: none;
    }

}