@use "./_variables.scss" as *;
@use "../overlay/_variables.scss" as *;
@use "../icons/_variables.scss" as *;
@use "../../z-index/index.scss" as *;
@use "../../functions/index.scss" as *;

// Generates 3 transform-only keyframes for spinner-3 at a given size.
// $w/$h = effective canvas dimensions (spinner size minus segment size).
@mixin spinner-3-keyframes($suffix, $w, $h) {
    @keyframes spinner-3-#{$suffix}-1 {
        0%       { transform: translate( -50%, -50% ); }
        33.3333% { transform: translate( calc( -50% - #{$w} / 2 ), calc( -50% + #{$h} ) ); }
        66.6666% { transform: translate( calc( -50% + #{$w} / 2 ), calc( -50% + #{$h} ) ); }
        100%     { transform: translate( -50%, -50% ); }
    }
    @keyframes spinner-3-#{$suffix}-2 {
        0%       { transform: translate( -50%, -50% ); }
        33.3333% { transform: translate( calc( -50% + #{$w} ), -50% ); }
        66.6666% { transform: translate( calc( -50% + #{$w} / 2 ), calc( -50% - #{$h} ) ); }
        100%     { transform: translate( -50%, -50% ); }
    }
    @keyframes spinner-3-#{$suffix}-3 {
        0%       { transform: translate( -50%, -50% ); }
        33.3333% { transform: translate( calc( -50% - #{$w} / 2 ), calc( -50% - #{$h} ) ); }
        66.6666% { transform: translate( calc( -50% - #{$w} ), -50% ); }
        100%     { transform: translate( -50%, -50% ); }
    }
}

// Generates 4 transform-only keyframes for spinner-4 at a given size.
// $hw/$hh = half canvas width/height (distance from corner to center).
@mixin spinner-4-keyframes($suffix, $hw, $hh) {
    @keyframes spinner-4-#{$suffix}-1 {
        0%    { transform: translate( calc( -50% + #{$hw} ), calc( -50% + #{$hh} ) ); }
        33.3% { transform: translate( -50%, -50% ); }
        66.6% { transform: translate( -50%, -50% ); }
        100%  { transform: translate( calc( -50% + #{$hw} ), calc( -50% + #{$hh} ) ); }
    }
    @keyframes spinner-4-#{$suffix}-2 {
        0%    { transform: translate( calc( -50% - #{$hw} ), calc( -50% + #{$hh} ) ); }
        33.3% { transform: translate( -50%, -50% ); }
        66.6% { transform: translate( -50%, -50% ); }
        100%  { transform: translate( calc( -50% - #{$hw} ), calc( -50% + #{$hh} ) ); }
    }
    @keyframes spinner-4-#{$suffix}-3 {
        0%    { transform: translate( calc( -50% - #{$hw} ), calc( -50% - #{$hh} ) ); }
        33.3% { transform: translate( -50%, -50% ); }
        66.6% { transform: translate( -50%, -50% ); }
        100%  { transform: translate( calc( -50% - #{$hw} ), calc( -50% - #{$hh} ) ); }
    }
    @keyframes spinner-4-#{$suffix}-4 {
        0%    { transform: translate( calc( -50% + #{$hw} ), calc( -50% - #{$hh} ) ); }
        33.3% { transform: translate( -50%, -50% ); }
        66.6% { transform: translate( -50%, -50% ); }
        100%  { transform: translate( calc( -50% + #{$hw} ), calc( -50% - #{$hh} ) ); }
    }
}

@mixin kendo-loader--layout-base() {

    .k-loader {
        position: relative;
        display: inline-block;
        vertical-align: middle;
        box-sizing: border-box;

        // Prevents the inline elements from being displaced.
        // A good example is the 'pulsing' loader inside a button.
        line-height: 0;

        // Loader sizes
        #{k-when-default($kendo-loader-default-size, "sm")}
        &.k-loader-sm {
            padding: $kendo-loader-sm-padding;

            .k-loader-segment {
                width: $kendo-loader-sm-segment-size;
                height: $kendo-loader-sm-segment-size;
            }
        }
        #{k-when-default($kendo-loader-default-size, "md")}
        &.k-loader-md {
            padding: $kendo-loader-md-padding;

            .k-loader-segment {
                width: $kendo-loader-md-segment-size;
                height: $kendo-loader-md-segment-size;
            }
        }
        #{k-when-default($kendo-loader-default-size, "lg")}
        &.k-loader-lg {
            padding: $kendo-loader-lg-padding;

            .k-loader-segment {
                width: $kendo-loader-lg-segment-size;
                height: $kendo-loader-lg-segment-size;
            }
        }
    }

    .k-loader-canvas {
        display: flex;
        position: relative;
    }

    // Loader segment
    .k-loader-segment {
        border-radius: $kendo-loader-segment-border-radius;
        background-color: currentColor;
        position: absolute;
    }


    // Loader pulsing 2
    @keyframes pulsing-2-segment {
        0% { transform: scale(1); }
        50% { transform: scale(1.5); }
        100% { transform: scale(1); }
    }

    .k-loader-pulsing-2 {

        .k-loader-canvas {
            align-items: center;
        }

        .k-loader-segment:nth-child(1) {
            left: 0;
            transform: scale( 1.5 );
            transform-origin: 0 50%;
            animation: pulsing-2-segment 1s ease infinite;
            animation-delay: -.5s;
        }
        .k-loader-segment:nth-child(2) {
            right: 0;
            transform-origin: 100% 50%;
            animation: pulsing-2-segment 1s ease infinite;
        }

        #{k-when-default($kendo-loader-default-size, "sm")}
        &.k-loader-sm {
            .k-loader-canvas {
                width: calc( #{$kendo-loader-sm-segment-size} * 3 );
                height: calc( #{$kendo-loader-sm-segment-size} * 1.5 );
            }
        }

        #{k-when-default($kendo-loader-default-size, "md")}
        &.k-loader-md {
            .k-loader-canvas {
                width: calc( #{$kendo-loader-md-segment-size} * 3 );
                height: calc( #{$kendo-loader-md-segment-size} * 1.5 );
            }
        }

        #{k-when-default($kendo-loader-default-size, "lg")}
        &.k-loader-lg {
            .k-loader-canvas {
                width: calc( #{$kendo-loader-lg-segment-size} * 3 );
                height: calc( #{$kendo-loader-lg-segment-size} * 1.5 );
            }
        }
    }


    // Loader spinner 3
    // Transform-only keyframes — one set per size, generated by mixin above.
    @include spinner-3-keyframes(
        "sm",
        calc( #{$kendo-loader-sm-spinner-3-width} - #{$kendo-loader-sm-segment-size} ),
        calc( #{$kendo-loader-sm-spinner-3-height} - #{$kendo-loader-sm-segment-size} )
    );
    @include spinner-3-keyframes(
        "md",
        calc( #{$kendo-loader-md-spinner-3-width} - #{$kendo-loader-md-segment-size} ),
        calc( #{$kendo-loader-md-spinner-3-height} - #{$kendo-loader-md-segment-size} )
    );
    @include spinner-3-keyframes(
        "lg",
        calc( #{$kendo-loader-lg-spinner-3-width} - #{$kendo-loader-lg-segment-size} ),
        calc( #{$kendo-loader-lg-spinner-3-height} - #{$kendo-loader-lg-segment-size} )
    );

    .k-loader-spinner-3 {

        // The dot center sits on the exact corner point.
        // Canvas is reduced by 1 dot size and offset by half a dot via margin.
        .k-loader-segment {
            transform: translate( -50%, -50% );
        }
        .k-loader-segment:nth-child(1) {
            top: 0;
            left: 50%;
        }
        .k-loader-segment:nth-child(2) {
            top: 100%;
            left: 0;
        }
        .k-loader-segment:nth-child(3) {
            top: 100%;
            left: 100%;
        }

        #{k-when-default($kendo-loader-default-size, "sm")}
        &.k-loader-sm {
            .k-loader-canvas {
                margin: calc( #{$kendo-loader-sm-segment-size} / 2 );
                width: calc( #{$kendo-loader-sm-spinner-3-width} - #{$kendo-loader-sm-segment-size} );
                height: calc( #{$kendo-loader-sm-spinner-3-height} - #{$kendo-loader-sm-segment-size} );
            }
            .k-loader-segment:nth-child(1) { animation: spinner-3-sm-1 2s ease infinite; }
            .k-loader-segment:nth-child(2) { animation: spinner-3-sm-2 2s ease infinite; }
            .k-loader-segment:nth-child(3) { animation: spinner-3-sm-3 2s ease infinite; }
        }

        #{k-when-default($kendo-loader-default-size, "md")}
        &.k-loader-md {
            .k-loader-canvas {
                margin: calc( #{$kendo-loader-md-segment-size} / 2 );
                width: calc( #{$kendo-loader-md-spinner-3-width} - #{$kendo-loader-md-segment-size} );
                height: calc( #{$kendo-loader-md-spinner-3-height} - #{$kendo-loader-md-segment-size} );
            }
            .k-loader-segment:nth-child(1) { animation: spinner-3-md-1 2s ease infinite; }
            .k-loader-segment:nth-child(2) { animation: spinner-3-md-2 2s ease infinite; }
            .k-loader-segment:nth-child(3) { animation: spinner-3-md-3 2s ease infinite; }
        }

        #{k-when-default($kendo-loader-default-size, "lg")}
        &.k-loader-lg {
            .k-loader-canvas {
                margin: calc( #{$kendo-loader-lg-segment-size} / 2 );
                width: calc( #{$kendo-loader-lg-spinner-3-width} - #{$kendo-loader-lg-segment-size} );
                height: calc( #{$kendo-loader-lg-spinner-3-height} - #{$kendo-loader-lg-segment-size} );
            }
            .k-loader-segment:nth-child(1) { animation: spinner-3-lg-1 2s ease infinite; }
            .k-loader-segment:nth-child(2) { animation: spinner-3-lg-2 2s ease infinite; }
            .k-loader-segment:nth-child(3) { animation: spinner-3-lg-3 2s ease infinite; }
        }
    }


    // Loader spinner 4
    @keyframes spinner-4 {
        0%    { transform: rotate(0); }
        33.3% { transform: rotate(0); }
        66.6% { transform: rotate(180deg); }
        100%  { transform: rotate(180deg); }
    }

    @include spinner-4-keyframes(
        "sm",
        calc( #{$kendo-loader-sm-spinner-4-width} / 2 ),
        calc( #{$kendo-loader-sm-spinner-4-height} / 2 )
    );
    @include spinner-4-keyframes(
        "md",
        calc( #{$kendo-loader-md-spinner-4-width} / 2 ),
        calc( #{$kendo-loader-md-spinner-4-height} / 2 )
    );
    @include spinner-4-keyframes(
        "lg",
        calc( #{$kendo-loader-lg-spinner-4-width} / 2 ),
        calc( #{$kendo-loader-lg-spinner-4-height} / 2 )
    );

    .k-loader-spinner-4 {
        .k-loader-canvas {
            animation: spinner-4 1.833s ease infinite;
        }

        .k-loader-segment { transform: translate( -50%, -50% ); }
        .k-loader-segment:nth-child(1) {
            top: 0;
            left: 0;
        }
        .k-loader-segment:nth-child(2) {
            top: 0;
            left: 100%;
        }
        .k-loader-segment:nth-child(3) {
            top: 100%;
            left: 100%;
        }
        .k-loader-segment:nth-child(4) {
            top: 100%;
            left: 0;
        }

        #{k-when-default($kendo-loader-default-size, "sm")}
        &.k-loader-sm {
            .k-loader-canvas {
                width: $kendo-loader-sm-spinner-4-width;
                height: $kendo-loader-sm-spinner-4-height;
            }
            .k-loader-segment:nth-child(1) { animation: spinner-4-sm-1 1.833s ease infinite; }
            .k-loader-segment:nth-child(2) { animation: spinner-4-sm-2 1.833s ease infinite; }
            .k-loader-segment:nth-child(3) { animation: spinner-4-sm-3 1.833s ease infinite; }
            .k-loader-segment:nth-child(4) { animation: spinner-4-sm-4 1.833s ease infinite; }
        }

        #{k-when-default($kendo-loader-default-size, "md")}
        &.k-loader-md {
            .k-loader-canvas {
                width: $kendo-loader-md-spinner-4-width;
                height: $kendo-loader-md-spinner-4-height;
            }
            .k-loader-segment:nth-child(1) { animation: spinner-4-md-1 1.833s ease infinite; }
            .k-loader-segment:nth-child(2) { animation: spinner-4-md-2 1.833s ease infinite; }
            .k-loader-segment:nth-child(3) { animation: spinner-4-md-3 1.833s ease infinite; }
            .k-loader-segment:nth-child(4) { animation: spinner-4-md-4 1.833s ease infinite; }
        }

        #{k-when-default($kendo-loader-default-size, "lg")}
        &.k-loader-lg {
            .k-loader-canvas {
                width: $kendo-loader-lg-spinner-4-width;
                height: $kendo-loader-lg-spinner-4-height;
            }
            .k-loader-segment:nth-child(1) { animation: spinner-4-lg-1 1.833s ease infinite; }
            .k-loader-segment:nth-child(2) { animation: spinner-4-lg-2 1.833s ease infinite; }
            .k-loader-segment:nth-child(3) { animation: spinner-4-lg-3 1.833s ease infinite; }
            .k-loader-segment:nth-child(4) { animation: spinner-4-lg-4 1.833s ease infinite; }
        }
    }


    // Loader container
    .k-loader-container {
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: k-z-index("loading");

        .k-loader {
            padding: 0;
        }

        // Loader Container Sizes
        #{k-when-default($kendo-loader-default-size, "sm")}
        &.k-loader-container-sm {
            .k-loader-container-inner {
                padding: $kendo-loader-sm-container-padding;
                gap: $kendo-loader-sm-container-gap;
            }

            .k-loader-container-label {
                font-size: $kendo-loader-sm-container-font-size;
            }
        }
        #{k-when-default($kendo-loader-default-size, "md")}
        &.k-loader-container-md {
            .k-loader-container-inner {
                padding: $kendo-loader-md-container-padding;
                gap: $kendo-loader-md-container-gap;
            }

            .k-loader-container-label {
                font-size: $kendo-loader-md-container-font-size;
            }
        }
        #{k-when-default($kendo-loader-default-size, "lg")}
        &.k-loader-container-lg {
            .k-loader-container-inner {
                padding: $kendo-loader-lg-container-padding;
                gap: $kendo-loader-lg-container-gap;
            }

            .k-loader-container-label {
                font-size: $kendo-loader-lg-container-font-size;
            }
        }

    }

    .k-loader-container {
        width: 100%;
        height: 100%;
        position: absolute;
        inset-block-start: 0;
        inset-inline-end: 0;
        inset-block-end: 0;
        inset-inline-start: 0;
    }


    .k-loader-container-inner {
        display: flex;
        align-items: center;
        position: relative;
        z-index: k-z-index("base", 2);
    }

    .k-loader-container-overlay {
        position: absolute;
    }

    .k-loader-container-overlay + .k-loader-container-inner {
        z-index: k-z-index("overlay");
    }

    .k-loader-container-panel {
        border-width: $kendo-loader-container-panel-border-width;
        border-style: $kendo-loader-container-panel-border-style;
        border-radius: $kendo-loader-container-panel-border-radius;
    }

    // Loader Position
    .k-loader-top {
        .k-loader-container-inner {
            flex-direction: column;
            text-align: center;
        }
    }
    .k-loader-end {
        .k-loader-container-label {
            order: -1;
        }
    }

}

// Legacy implementation of the loading icon inside inputs and pickers
// Replace with loader component
@mixin kendo-loading--layout-base() {

    // Loading mask
    .k-loading-mask,
    .k-loading-image,
    .k-loading-color {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;

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

    .k-loading-mask {
        z-index: $kendo-zindex-loading;

        &.k-opaque {
            .k-loading-color {
                opacity: 1;
            }
        }
    }
    .k-loading-text {
        text-indent: -4000px;
        text-align: center;
        position: absolute;
        color: $kendo-loading-text;
    }
    .k-loading-image {
        z-index: k-z-index("base", 2);
        color: $kendo-loading-text;
    }
    .k-loading-color {
        background-color: $kendo-loading-bg;
        opacity: $kendo-loading-opacity;
    }

    // Loading indicator
    .k-i-loading {
        width: $ki-icon-size;
        height: $ki-icon-size;
        line-height: 1;
        display: inline-flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
        position: relative;
        background-color: transparent;
        box-sizing: border-box;
        color: $kendo-loading-text;

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

    .k-i-loading::before,
    .k-i-loading::after,
    .k-loading-image::before,
    .k-loading-image::after {
        position: absolute;
        inset-block-start: 50%;
        inset-inline-start: 50%;
        display: inline-block;
        content: "";
        box-sizing: inherit;
        border-radius: 50%;
        border-width: .05em;
        border-style: solid;
        border-color: currentColor;
        border-block-start-color: transparent;
        border-block-end-color: transparent;
        background-color: transparent;
    }

    .k-icon.k-i-loading::before,
    .k-icon.k-i-loading::after {
        content: "";
    }

    .k-i-loading::before,
    .k-loading-image::before {
        margin-block-start: -.5em;
        margin-inline-start: -.5em;
        width: 1em;
        height: 1em;
        animation: k-loading-animation .7s linear infinite;
    }

    .k-i-loading::after,
    .k-loading-image::after {
        margin-block-start: -.25em;
        margin-inline-start: -.25em;
        width: .5em;
        height: .5em;
        animation: k-loading-animation reverse 1.4s linear infinite;
    }

    .k-loading-image::before,
    .k-loading-image::after {
        content: "";
        // See https://github.com/telerik/kendo-themes/issues/1925
        border-width: 1px; // TODO: Remove once we drop IE support
        border-width: clamp( .015em, 1px, 1px );
        font-size: 4em;
    }

    // Loading animation
    @keyframes k-loading-animation {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

}

@mixin kendo-loader--layout() {
    @include kendo-loader--layout-base();
    @include kendo-loading--layout-base();
}