.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

.fade-enter-to,
.fade-leave-from {
    opacity: 1;
}

.fade-enter-active {
    transition: opacity 0.2s linear;
}

.fade-leave-active {
    transition: opacity 0.3s linear;
    transition-delay: 0.2s;
}

.slide-enter-from,
.slide-leave-to {
    transform: translateY(20%);
}

.slide-enter-to,
.slide-leave-from {
    transform: translateY(0);
}

.slide-enter-active {
    transition: transform 0.3s ease-out;
}

.slide-leave-active {
    transition: transform 0.3s ease-in;
}

.slide-down-enter-from,
.slide-down-leave-to {
    transform: translateY(-100%);
}

.slide-down-enter-to,
.slide-down-leave-from {
    transform: translateY(0);
}

.slide-down-enter-active {
    transition: transform 0.3s ease-out;
}

.slide-down-leave-active {
    transition: transform 0.3s ease-in;
}

.slide-top-enter-from,
.slide-top-leave-to {
    transform: translateY(100%);
}

/* Desktop */
@media (min-width: 992px) {
    .slide-top-enter-from,
    .slide-top-leave-to {
        transform: translateY(5%);
    }
}

.slide-top-enter-to,
.slide-top-leave-from {
    transform: translateY(0);
}

.slide-top-enter-active {
    transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.slide-top-leave-active {
    transition: transform 0.3s cubic-bezier(0.8, 0, 1, 1);
}

.slide-right-enter-from,
.slide-right-leave-to {
    position: absolute;
    top: 0;
    opacity: 0;
    transform: translate(-100%, 0);
}

.slide-right-enter-to,
.slide-right-leave-from {
    position: initial;
    opacity: 1;
    transform: translate(0%, 0);
}

.slide-right-enter-active {
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.slide-right-leave-active {
    transition: transform 0.2s ease-in, opacity 0.2s ease-in;
}

.slide-left-enter-from,
.slide-left-leave-to {
    position: absolute;
    top: 0;
    opacity: 0;
    transform: translate(100%, 0);
}

.slide-left-enter-to,
.slide-left-leave-from {
    position: initial;
    opacity: 1;
    transform: translate(0%, 0);
}

.slide-left-enter-active {
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.slide-left-leave-active {
    transition: transform 0.2s ease-in, opacity 0.2s ease-in;
}

.slide-scale-top-enter-from,
.slide-scale-top-leave-to {
    transform: scale(0.8);
    transform-origin: top center;
}

.slide-scale-top-enter-to,
.slide-scale-top-leave-from {
    transform: scale(1);
    transform-origin: top center;
}

.slide-scale-top-enter-active {
    transition: transform 0.3s ease-out;
}

.slide-scale-top-leave-active {
    transition: transform 0.2s ease-in;
}

.slide-scale-center-enter-from,
.slide-scale-center-leave-to {
    transform: scale(0.8);
    transform-origin: center;
}

.slide-scale-center-enter-to,
.slide-scale-center-leave-from {
    transform: scale(1);
    transform-origin: center;
}

.slide-scale-center-enter-active {
    transition: transform 0.3s ease-out;
}

.slide-scale-center-leave-active {
    transition: transform 0.2s ease-in;
}

.transition-duration-05s {
    transition-duration: 0.5s !important;
}

.transition-delay-05s {
    transition-delay: 0.5s !important;
}

@keyframes shimmer {
    0% {
        background: var(--theme-fill-30);
    }

    100% {
        background: var(--theme-fill-40);
    }
}

.shimmer {
    --ui-shimmer-small: 60px;
    --ui-shimmer-medium: 120px;
    --ui-shimmer-large: 180px;

    height: var(--space-x4);
    border-radius: var(--ui-button-border-radius-override, var(--theme-border-radius-button-medium));
    animation: shimmer 0.7s ease-in-out infinite alternate;
}

.shimmer[t-size="small"] {
    width: var(--ui-shimmer-small);
}

.shimmer[t-size="medium"] {
    width: var(--ui-shimmer-medium);
}

.shimmer[t-size="large"] {
    width: var(--ui-shimmer-large);
}