﻿@import '_back.scss';
@import '_perspective.scss';
@import '_bounce.scss';
@import '_fade.scss';
@import '_flash.scss';
@import '_flip.scss';
@import '_headshake.scss';
@import '_heartbeat.scss';
@import '_hinge.scss';
@import '_jack.scss';
@import '_jello.scss';
@import '_lightSpeed.scss';
@import '_pulse.scss';
@import '_roll.scss';
@import '_rotate.scss';
@import '_rubberband.scss';
@import '_slide.scss';
@import '_swing.scss';
@import '_tada.scss';
@import '_wobble.scss';
@import '_zoom.scss';
@import '_key_frames.scss';


.mud-ex-gradient-text {
    background: linear-gradient( 90deg,var(--mud-palette-primary),var(--mud-palette-secondary),var(--mud-palette-info),var(--mud-palette-primary-hover),var(--mud-palette-secondary-lighten),var(--mud-palette-warning),var(--mud-palette-tertiary));
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    &.simple {
        background: linear-gradient( 90deg,var(--mud-palette-primary),var(--mud-palette-secondary));
    }

    &.animate {
        animation: reverse textclip 3.0s linear infinite;

        @keyframes textclip {
            to {
                background-position: 200% center;
            }
        }
    }
}

.mud-ex-simple-svg-animate path {
    stroke: lightgray;
    fill: transparent;
    stroke-width: 1;
    stroke-dasharray: 900 900;
    animation: strokeAni 1s infinite linear;

    @keyframes strokeAni {
        0% {
            fill: white;
            stroke-dashoffset: 900;
        }

        100% {
            fill: purple;
            stroke-dashoffset: 0;
        }
    }
}

.mud-ex-animate-all-properties {
    transition-property: all !important;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

.mud-dialog-slide-from {
    &-left {
        left: -100vw;
    }

    &-right {
        right: -100vw;
    }

    &-bottom {
        bottom: -100vh
    }

    &-top {
        top: -100vh
    }
}

.mud-dialog-slide-to {
    &-left {
        left: 0;
    }

    &-right {
        right: 0;
    }

    &-bottom {
        bottom: 0
    }

    &-top {
        top: 0
    }
}

.mud-dialog-slide-transform-from {
    &-left {
        /*left: -100vw;*/
        transform: translateX(-100vw);
    }

    &-right {
        transform: translateX(100vw);
    }

    &-bottom {
        transform: translateY(100vh);
    }

    &-top {
        transform: translateY(-100vh);
    }
}

.mud-dialog-slide-transform-to {
    &-left {
        transform: translateX(0);
    }

    &-right {
        transform: translateX(0);
    }

    &-bottom {
        transform: translateY(0);
    }

    &-top {
        transform: translateY(0);
    }
}

.slide-kf-from-right {
    animation: kf-mud-dialog-slide-right 900ms ease-in-out 1 alternate;
}

.slide-kf-from-left {
    animation: kf-mud-dialog-slide-left 900ms ease-in-out 1 alternate;
}

.slide-kf-from-top {
    animation: kf-mud-dialog-slide-top 900ms ease-in-out 1 alternate;
}

.slide-kf-from-bottom {
    animation: kf-mud-dialog-slide-bottom 900ms ease-in-out 1 alternate;
}

@keyframes kf-mud-dialog-slide-right {
    0% {
        transform: translateX(100vw);
    }

    85% {
        transform: translateX(-20px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes kf-mud-dialog-slide-top {
    0% {
        transform: translateY(-100vw);
    }

    85% {
        transform: translateY(20px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes kf-mud-dialog-slide-left {
    0% {
        transform: translateX(-100vw)
    }

    85% {
        transform: translateX(20px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes kf-mud-dialog-slide-bottom {
    0% {
        transform: translateY(100vw);
    }

    85% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes kf-mud-dialog-fade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes scaleOut {
    0% {
        transform: scale(1);
    }

    20% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes scaleIn {
    0% {
        transform: scale(0.2);
    }

    80% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes fade-in-animation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes mud-ex-fade-in-animation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.mud-ex-fade-out {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 2s, opacity 2s linear;
}

.mud-ex-fade-in {
    visibility: visible;
    opacity: 1;
    transition: opacity 2s linear;
}


// Classes for transitions in seconds
@for $i from 1 through 10 {
    .mud-ex-fade-out-#{$i}s {
        visibility: hidden;
        opacity: 0;
        transition: visibility 0s #{$i}s, opacity #{$i}s linear;
    }
}

// Classes for transitions in milliseconds, corrected
@for $i from 1 through 10 {
    $ms: $i * 100; // Calculate the milliseconds
    .mud-ex-fade-out-#{$ms}ms {
        visibility: hidden;
        opacity: 0;
        transition: visibility 0s #{$ms}ms, opacity #{$ms}ms linear;
    }
}

// Classes for transitions in seconds
@for $i from 1 through 10 {
    .mud-ex-fade-in-#{$i}s {
        visibility: visible;
        opacity: 1;
        transition: opacity #{$i}s linear;
    }
}

// Classes for transitions in milliseconds, corrected
@for $i from 1 through 10 {
    $ms: $i * 100; // Calculate the milliseconds
    .mud-ex-fade-in-#{$i}ms {
        visibility: visible;
        opacity: 1;
        transition: opacity #{$i}s linear;
    }
}



.mud-dialog-animate-ex {
    position: fixed;
    transition-property: all;
    /*transition-timing-function: ease-in-out;*/
    /*transition-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);*/
}




@charset "UTF-8";

:root {
    --animate-duration: 1s;
    --animate-delay: 1s;
    --animate-repeat: 1;
}

.animate__animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-duration: var(--animate-duration);
    animation-duration: var(--animate-duration);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.animate__animated.animate__infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.animate__animated.animate__repeat-1 {
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: var(--animate-repeat);
    animation-iteration-count: var(--animate-repeat);
}

.animate__animated.animate__repeat-2 {
    -webkit-animation-iteration-count: calc(1 * 2);
    animation-iteration-count: calc(1 * 2);
    -webkit-animation-iteration-count: calc(var(--animate-repeat) * 2);
    animation-iteration-count: calc(var(--animate-repeat) * 2);
}

.animate__animated.animate__repeat-3 {
    -webkit-animation-iteration-count: calc(1 * 3);
    animation-iteration-count: calc(1 * 3);
    -webkit-animation-iteration-count: calc(var(--animate-repeat) * 3);
    animation-iteration-count: calc(var(--animate-repeat) * 3);
}

.animate__animated.animate__delay-1s {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation-delay: var(--animate-delay);
    animation-delay: var(--animate-delay);
}

.animate__animated.animate__delay-2s {
    -webkit-animation-delay: calc(1s * 2);
    animation-delay: calc(1s * 2);
    -webkit-animation-delay: calc(var(--animate-delay) * 2);
    animation-delay: calc(var(--animate-delay) * 2);
}

.animate__animated.animate__delay-3s {
    -webkit-animation-delay: calc(1s * 3);
    animation-delay: calc(1s * 3);
    -webkit-animation-delay: calc(var(--animate-delay) * 3);
    animation-delay: calc(var(--animate-delay) * 3);
}

.animate__animated.animate__delay-4s {
    -webkit-animation-delay: calc(1s * 4);
    animation-delay: calc(1s * 4);
    -webkit-animation-delay: calc(var(--animate-delay) * 4);
    animation-delay: calc(var(--animate-delay) * 4);
}

.animate__animated.animate__delay-5s {
    -webkit-animation-delay: calc(1s * 5);
    animation-delay: calc(1s * 5);
    -webkit-animation-delay: calc(var(--animate-delay) * 5);
    animation-delay: calc(var(--animate-delay) * 5);
}

.animate__animated.animate__faster {
    -webkit-animation-duration: calc(1s / 2);
    animation-duration: calc(1s / 2);
    -webkit-animation-duration: calc(var(--animate-duration) / 2);
    animation-duration: calc(var(--animate-duration) / 2);
}

.animate__animated.animate__fast {
    -webkit-animation-duration: calc(1s * 0.8);
    animation-duration: calc(1s * 0.8);
    -webkit-animation-duration: calc(var(--animate-duration) * 0.8);
    animation-duration: calc(var(--animate-duration) * 0.8);
}

.animate__animated.animate__slow {
    -webkit-animation-duration: calc(1s * 2);
    animation-duration: calc(1s * 2);
    -webkit-animation-duration: calc(var(--animate-duration) * 2);
    animation-duration: calc(var(--animate-duration) * 2);
}

.animate__animated.animate__slower {
    -webkit-animation-duration: calc(1s * 3);
    animation-duration: calc(1s * 3);
    -webkit-animation-duration: calc(var(--animate-duration) * 3);
    animation-duration: calc(var(--animate-duration) * 3);
}

@media print, (prefers-reduced-motion: reduce) {
    .animate__animated {
        -webkit-animation-duration: 1ms !important;
        animation-duration: 1ms !important;
        -webkit-transition-duration: 1ms !important;
        transition-duration: 1ms !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important;
    }

    .animate__animated[class*='Out'] {
        opacity: 0;
    }
}