@import '../../style_config/config.scss';

@keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
}

@keyframes disapper {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.preloader {
    width: 1.5em;
    height: inherit;
    position: relative;

    &__fill {
        fill: $preloader-fill-color;
    }

    &__wrap {
        transform-origin: center cetner;

        &--center {
            width: 100%;
            display:flex;
            justify-content: center;
        }
    }

    &__outerline {
        fill: $preloader-background-color;
    }

    &--large {
        width: 8rem;
        height: 8rem;
    }

    &--medium {
        width: 4rem;
        height: 4rem;
    }

    &--tiny {
        width: 2rem;
        height: 2rem;
    }

    &--small {
        width: 3rem;
        height: 3rem;
    }

    &--floating {
        position:fixed!important;
        bottom: 2%!important;
        right: 3%!important;
        transform-origin: left bottom;
    }
}

.preloader--page__wrap {
    opacity: 1;
    position:fixed;
    z-index: $z-index-8;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    background-color:white;
    .preloader--page {
        width: 13%;
        padding-top: 13%;
        margin: 29vmin auto;
        border: 6vmin solid $preloader-background-color;
        border-top: 6vmin solid $preloader-fill-color;
        border-radius: 50%;
        animation: rotate 3s infinite linear;
        @include response ($desktophd) {
            border: 3rem solid $preloader-background-color;
            border-top: 3rem solid $preloader-fill-color;
        }
    }
    @include response ($desktophd) {
        display:flex;
        align-items: center;
        .preloader--page {
            width: 50vmin;
            padding-top: 50vmin;
        }
    }
}