@use '@justeattakeaway/pie-css/scss' as p;

:host {
    display: block;
}

:host([isCentered]) {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/**
* Shorthand mixin for updating the HSL custom properties for the loading spinner.
* Takes in the name of the color to be split into its HSL components.
*/
@mixin spinner-base-colors($color) {
    --spinner-base-color-h: var(#{$color}-h);
    --spinner-base-color-s: var(#{$color}-s);
    --spinner-base-color-l: var(#{$color}-l);
}

// Spin animation for loading state
@keyframes rotate360 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.c-spinner {
    --spinner-size: 24px;
    --spinner-left-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), 1);
    --spinner-right-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), 0.35);

    block-size: var(--spinner-size);
    inline-size: var(--spinner-size);
    border-radius: var(--dt-radius-rounded-e);
    border-width: calc(var(--spinner-size) / 8);
    border-style: solid;
    border-color: var(--spinner-left-color) var(--spinner-right-color) var(--spinner-right-color) var(--spinner-left-color);
    will-change: transform;
    animation: rotate360 1.15s linear infinite;

    @include spinner-base-colors('--dt-color-content-brand-solid');

    &.c-spinner--medium,
    &.c-spinner--brand {
        /* Same as default styles */
    }

    &.c-spinner--secondary {
        @include spinner-base-colors('--dt-color-content-interactive-secondary-solid');
    }

    &.c-spinner--secondary-dark {
        @include spinner-base-colors('--dt-color-content-interactive-dark-solid');
    }

    &.c-spinner--inverse {
        @include spinner-base-colors('--dt-color-content-inverse-solid');
    }

    &.c-spinner--inverse-light {
        @include spinner-base-colors('--dt-color-content-light-solid');
    }

    &.c-spinner--xsmall {
        --spinner-size: 16px;
    }

    &.c-spinner--small {
        --spinner-size: 20px;
    }

    &.c-spinner--large {
        --spinner-size: 32px;
    }

    &.c-spinner--xlarge {
        --spinner-size: 48px;
    }
}

// The label is only required for screen readers so we need to visually hide it
.c-spinner-label {
    @include p.visually-hidden;
}