@use '@angular/material' as mat;
@mixin loader-theme($theme) {
    $primary: map-get($theme, primary);

    .waiter {
        border-bottom: 1.25vmin solid mat.get-color-from-palette($primary, 500, 0.2);
        border-left: 1.25vmin solid mat.get-color-from-palette($primary);
        border-right: 1.25vmin solid mat.get-color-from-palette($primary, 500, 0.2);
        border-top: 1.25vmin solid mat.get-color-from-palette($primary, 500, 0.2);
        font-size: 0.7rem;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -5vmin;
        margin-top: -5vmin;
        -webkit-animation: spin 1.1s infinite linear;
        animation: spin 1.1s infinite linear;
    }

    .waiter,
    .waiter:after {
        border-radius: 50%;
        width: 10vmin;
        height: 10vmin;
    }

    @media (max-height: 150px),
    (max-width: 150px) {
        .waiter {
            width: 15px;
            height: 15px;
            margin-top: -10px;
            margin-left: -5px;
            border-bottom: 3px solid mat.get-color-from-palette($primary, 500, 0.2);
            border-left: 3px solid mat.get-color-from-palette($primary);
            border-right: 3px solid mat.get-color-from-palette($primary, 500, 0.2);
            border-top: 3px solid mat.get-color-from-palette($primary, 500, 0.2);
        }
    }

    @-webkit-keyframes spin {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

    @keyframes spin {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
}