.spinner {
    width: 24px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 3px solid $secondary;
    animation: delayedspinningfirst 0.8s infinite linear alternate, delayedspinninglast 1.6s infinite linear;
    margin-top: 24px;
    margin-bottom: 24px;
    margin-left: auto;
    margin-right: auto;
}
@keyframes delayedspinningfirst {
    0% {
        clip-path: polygon( 50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0% );
    }
    12.5% {
        clip-path: polygon( 50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0% );
    }
    25% {
        clip-path: polygon( 50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100% );
    }
    50% {
        clip-path: polygon( 50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0 100% );
    }
    62.5% {
        clip-path: polygon( 50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0 100% );
    }
    75% {
        clip-path: polygon( 50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0 100% );
    }
    100% {
        clip-path: polygon( 50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0 100% );
    }
}
@keyframes delayedspinninglast {
    0%     { transform: scaleY(1) rotate(0deg); }
    49.99% { transform: scaleY(1) rotate(135deg); }
    50%    { transform: scaleY(-1) rotate(0deg); }
    100%   { transform: scaleY(-1) rotate(-135deg); }
}
button.btn-close {
    font-size: 12px;
    &:hover,
    &:active {
        background-color: $notyetanswered;
    }
}