@use "sass:map";
@use "../core/_index.scss" as *;
@use "./_variables.scss" as *;
@use "@progress/kendo-theme-core/scss/components/colorgradient/_layout.scss" as *;

@mixin kendo-color-gradient--layout() {
    @include kendo-color-gradient--layout-base();

    .k-colorgradient-canvas {

        .k-hsv-rectangle {
            border-width: $kendo-color-gradient-canvas-border-width;
            border-style: solid;
        }

        .k-hsv-draghandle {
            background-color: transparent;
        }

        .k-hsv-gradient {
            border-radius: 0;
        }

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

    .k-colorgradient .k-draghandle {

        &:focus,
        &.k-focus {
            outline-width: 2px;
        }
    }

    .k-colorgradient-slider {

        &.k-alpha-slider .k-slider-track::before {
            border-radius: 2px;
        }

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

        .k-slider-thumb {
            background: transparent;

            &::after {
                display: none;
            }
        }
    }

    .k-colorgradient-inputs {

        .k-colorgradient-input-label {
            font-size: $kendo-color-gradient-input-label-font-size
        }

        .k-input .k-input-inner {
            padding-inline: k-spacing(2);
            text-align: start;
            text-overflow: ellipsis;
        }
    }
}