@use '../../styles/variables';

.thy-loading {
    width: 100%;
}

.thy-loading-mask {
    position: relative;
    .thy-loading-indicator {
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.2);
    }
}

.thy-loading-indicator {
    margin-bottom: 20px;
    width: 100%;
    text-align: center;
    h4 {
        padding-top: 20px;
        font-size: variables.$font-size-base;
        font-weight: normal;
        margin-bottom: 8px;
        margin-top: 8px;
    }
}

.thy-loading-ellipsis {
    display: inline-block;
    position: relative;
    height: 8px;
    border-radius: 4px;
    transform: translateX(-18px);
    &:before,
    &:after {
        content: '';
        display: block;
        position: absolute;
        height: 8px;
        width: 8px;
        border-radius: 4px;
    }
    &:before {
        animation: loading-ellipsis-b 1s ease-in-out infinite;
        background: variables.$primary;
        opacity: 0.4;
    }
    &:after {
        animation: loading-ellipsis-a 1s ease-in-out infinite;
        background: variables.$primary;
        opacity: 0.8;
    }
    .thy-spot {
        position: absolute;
        left: 13px;
        height: 8px;
        width: 8px;
        background: variables.$primary;
        border-radius: 4px;
    }
}

@keyframes loading-ellipsis-b {
    0% {
        left: 0;
        transform: scale(1.1);
    }
    50% {
        left: 25px;
        transform: scale(1);
    }
    100% {
        left: 0;
        transform: scale(1.1);
    }
}

@keyframes loading-ellipsis-a {
    0% {
        left: 25px;
        transform: scale(1.1);
    }
    50% {
        left: 0;
        transform: scale(1);
    }
    100% {
        left: 25px;
        transform: scale(1.1);
    }
}
