@use "../variables" as vars;
@use "../functions" as func;

$-spinner-color: func.color(vars.$spinner-animation-color);
$-spinner-light-color: func.color(vars.$spinner-animation-light-color);
$-spinner-background: func.color(vars.$spinner-animation-background);
$-border-width: func.units(2, 'rem');
$-small-border-width: func.units(1, 'rem');

.spinner {
    position: relative;
    display: inline-block;
    width: func.units(7, 'rem');
    min-width: func.units(7, 'rem');
    height: func.units(7, 'rem');
    border-radius: 50%;
    border: $-border-width solid $-spinner-background;
    
    &::before {
        content: '';
        position: absolute;
        left: -$-border-width;
        top: -$-border-width;
        display: inline-block;
        width: func.units(7, 'rem');
        min-width: func.units(7, 'rem');
        height: func.units(7, 'rem');
        border-radius: 50%;
        border: $-border-width solid $-spinner-color;
        animation:
            circle-path 3.0s infinite linear,
            rotate-circle 1.5s infinite linear;
        }

    &.spinner-small {
        width: func.units(4, 'rem');
        min-width: func.units(4, 'rem');
        height: func.units(4, 'rem');
        border: $-small-border-width solid $-spinner-background;

        &::before {
            left: -$-small-border-width;
            top: -$-small-border-width;
            width: func.units(4, 'rem');
            min-width: func.units(4, 'rem');
            height: func.units(4, 'rem');
            border: $-small-border-width solid $-spinner-color;
        }
    }

    &.spinner-light {
        border-color: rgba(255, 255, 255, 0.2);

        &::before {
            border-color: $-spinner-light-color;
        }
        
    }
}

/* Class for showing a spinner on buttons */
.spinner-active {
    cursor: progress;
    position: relative;

    .spinner {
        position: absolute;
    }

    .text-hidden {
        opacity: 0;
    }
}

.spinner-box {
    background-color: func.color(vars.$spinner-box-background);
    position: absolute;
    padding: func.units(5);
    box-shadow: func.shadow('heavy');
    border-radius: func.border-radius('medium');
    display: flex;
    flex-direction: column;
    align-items: center;
}

.spinner-status {
    text-align: center;
    margin-top: func.units(4);
}

.loading-dimmed {
    opacity: 0.25;
}

// Polygon coordinates. 101% chosen instead of 100% to avoid a cropped pixel.
$-tl: 0 0;          // top left
$-to: 50% 0%;       // top
$-tr: 101% 0%;      // top right
$-cl: 0 50%;        // center left
$-ce: 50% 50%;      // center
$-cr: 101% 50%;     // center right
$-bl: 0 101%;       // bottom left
$-bo: 50% 101%;     // bottom
$-br: 101% 101%;    // bottom right

@keyframes circle-path {
    0% { clip-path:     polygon($-ce, $-to, $-tr, $-tr, $-tr, $-tr, $-tr, $-tr, $-tr); }
    4% { clip-path:     polygon($-ce, $-to, $-tr, $-cr, $-cr, $-cr, $-cr, $-cr, $-cr); }
    10% { clip-path:    polygon($-ce, $-to, $-tr, $-cr, $-br, $-br, $-br, $-br, $-br); }
    15% { clip-path:    polygon($-ce, $-to, $-tr, $-cr, $-br, $-bo, $-bo, $-bo, $-bo); }
    20% { clip-path:    polygon($-ce, $-to, $-tr, $-cr, $-br, $-bo, $-bl, $-bl, $-bl); }
    30% { clip-path:    polygon($-ce, $-to, $-tr, $-cr, $-br, $-bo, $-bl, $-cl, $-cl); }
    40% { clip-path:    polygon($-ce, $-to, $-tr, $-cr, $-br, $-bo, $-bl, $-cl, $-tl); }
    50% { clip-path:    polygon($-ce, $-tr, $-cr, $-br, $-bo, $-bl, $-cl, $-tl, $-to); }
    60% { clip-path:    polygon($-ce, $-cr, $-br, $-bo, $-bl, $-cl, $-tl, $-to, $-tr); }
    70% { clip-path:    polygon($-ce, $-br, $-br, $-bo, $-bl, $-cl, $-tl, $-to, $-tr); }
    80% { clip-path:    polygon($-ce, $-bo, $-bo, $-bo, $-bl, $-cl, $-tl, $-to, $-tr); }
    85% { clip-path:    polygon($-ce, $-bl, $-bl, $-bl, $-bl, $-cl, $-tl, $-to, $-tr); }
    90% { clip-path:    polygon($-ce, $-cl, $-cl, $-cl, $-cl, $-cl, $-tl, $-to, $-tr); }
    96% { clip-path:    polygon($-ce, $-tl, $-tl, $-tl, $-tl, $-tl, $-tl, $-to, $-tr); }
    100% { clip-path:   polygon($-ce, $-to, $-to, $-to, $-to, $-to, $-to, $-to, $-tr); }
}

@keyframes rotate-circle {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}