@import '../shared-styles/index';

$diameter-small: nx-spacer(s);
$diameter-medium: nx-spacer(m);
$diameter-large: nx-spacer(3m);
$edge-margin: 4%;

@keyframes spin {
    0% {
        transform: rotate(45deg);
    }
    100% {
        transform: rotate(405deg);
    }
}

:host {
    position: relative;
    display: block;
}

:host(.nx-spinner--small) {
    width: $diameter-small;
    height: $diameter-small;
}

:host(.nx-spinner--medium) {
    width: $diameter-medium;
    height: $diameter-medium;
}

:host(.nx-spinner--large) {
    width: $diameter-large;
    height: $diameter-large;
}

.nx-spinner__spin-block {
    width: 100%;
    height: 100%;
    transform: rotate(45deg);
    border-style: solid;
    border-radius: 50%;
    border-color: v(spinner-indicator-color) v(spinner-background-color) v(spinner-background-color) v(spinner-background-color);
    animation-name: spin;
    animation-duration: 0.8s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

:host(.nx-spinner--small) .nx-spinner__spin-block {
    border-width: calc(#{0.1 * $diameter-small});
}

:host(.nx-spinner--medium) .nx-spinner__spin-block {
    border-width: calc(#{0.1 * $diameter-medium});
}

:host(.nx-spinner--large) .nx-spinner__spin-block {
    border-width: calc(#{0.1 * $diameter-large});
}

.nx-spinner__edge-left,
.nx-spinner__edge-right {
    width: 12%;
    height: 12%;
    border-radius: 50%;
    background-color: v(spinner-indicator-color);
    position: absolute;
    top: $edge-margin;
}

// correct the size of the bobbles for small, because otherwise they look off
:host(.nx-spinner--small) {
    .nx-spinner__edge-left,
    .nx-spinner__edge-right {
        width: 10%;
        height: 10%;
    }
}

.nx-spinner__edge-left {
    left: $edge-margin;
}

.nx-spinner__edge-right {
    right: $edge-margin;
}

// negative styles
:host(.nx-spinner--negative) {
    .nx-spinner__spin-block {
        border-color: v(spinner-negative-indicator-color) v(spinner-negative-background-color) v(spinner-negative-background-color)
            v(spinner-negative-background-color);
    }

    .nx-spinner__edge-left,
    .nx-spinner__edge-right {
        background-color: v(spinner-negative-indicator-color);
    }
}

@media screen and (forced-colors: active) {
    :host,
    :host.nx-spinner--negative {
        .nx-spinner__spin-block {
            border-color: Canvas highlight highlight highlight;
        }
    }
}
