bylapidist/components

@import '../global.module';

@keyframes fade-in {
    0% { opacity: 0 }
    50% { opacity: 0 }
    100% { opacity: 1 }
}

@keyframes thinking {
    0% { opacity: 1 }
    50% { opacity: 0.6 }
    100% { opacity: 1 }
}

@keyframes slide-right {
    0% { transform: translate3d(-100%,0,0) }
    80% { transform: translateZ(0) }
    90% { transform: translate3d(-5%,0,0) }
    100% { transform: translateZ(0) }
}

@keyframes slide-up-left {
    0% { transform: translate3d(100%,100%,0) }
    80% { transform: translateZ(0) }
    90% { transform: translate3d(5%,5%,0) }
    100% { transform: translateZ(0) }
}

@keyframes slide-down {
    0% { transform: translate3d(0,-100%,0) }
    80% { transform: translateZ(0) }
    90% { transform: translate3d(0,-5%,0) }
    100% { transform: translateZ(0) }
}

.this {
    width: var(--size-16);
    overflow: hidden;
    animation: fade-in;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;

    .a {
        fill: var(--colour-success-dark);
    }

    .b {
        fill: var(--colour-primary-dark);
    }

    .c {
        fill: var(--colour-secondary-dark);
    }

    &.animation-slide {
        .a {
            animation: slide-right;
            animation-delay: 0.1s;
            animation-duration: 0.8s;
            animation-iteration-count: 1;
            animation-timing-function: linear;
        }

        .b {
            animation: slide-up-left;
            animation-delay: 0.2s;
            animation-duration: 0.8s;
            animation-iteration-count: 1;
            animation-timing-function: linear;
        }

        .c {
            animation: slide-down;
            animation-delay: 0.3s;
            animation-duration: 0.6s;
            animation-iteration-count: 1;
            animation-timing-function: linear;
        }
    }
}