.icon-opened {
    animation-name: rotate-open-icon-animation;
    animation-duration: .2s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

.icon-closed {
    animation-name: rotate-close-icon-animation;
    animation-duration: .2s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

.global-tooltip-hidden {
    animation-name: hide-tooltip;
    animation-duration: 250ms;
    animation-fill-mode: forwards;
}

.global-tooltip-show {
    animation-name: show-tooltip;
    animation-duration: 250ms;
    animation-fill-mode: forwards;
}

.card-open {
    animation-name: open-card-animation;
    animation-duration: .5s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

.card-close {
    animation-name: close-card-animation;
    animation-duration: .5s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

.hide-filter-icon {
    animation-name: hide-filter-icon-animation;
    animation-duration: .4s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

.show-filter-icon {
    animation-name: show-filter-icon-animation;
    animation-duration: .4s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

.note-preview-label--hide {
    animation-name: hide-note-preview-label;
    animation-duration: .4s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
}

.note-preview-label--show {
    animation-name: show-note-preview-label;
    animation-duration: .4s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
}

@keyframes rotate-open-icon-animation {
    from {
        transform: rotate(-45deg);
    }

    to {
        transform: rotate(0deg);
    }
}

@keyframes rotate-close-icon-animation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-45deg);
    }
}

@keyframes button-gradient-animation {
    0% {
        background-position: 0% 50%;
        filter: brightness(1);
    }

    50% {
        background-position: 100% 50%;
        filter: brightness(1.1);
    }

    100% {
        background-position: 200% 50%;
        filter: brightness(1);
    }
}

@keyframes reset-button-animation {
    from {
    }

    to {
        background-position: 0% 50%;
    }
}

@keyframes hide-tooltip {
    from {
        visibility: visible;
        opacity: 1;
    }

    to {
        visibility: hidden;
        opacity: 0;
    }
}

@keyframes show-tooltip {
    from {
        visibility: hidden;
        opacity: 0;
    }

    to {
        visibility: visible;
        opacity: 1;
    }
}

@keyframes open-card-animation {
    from {
        transform: translateX(350px);
        width: 150px;
    }

    to {
        transform: translateX(0);
        width: 300px;
    }
}

@keyframes close-card-animation {
    from {
        transform: translateX(0);
        width: 300px;
    }

    to {
        transform: translateX(350px);
        width: 150px;
    }
}

@keyframes show-filter-icon-animation {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes hide-filter-icon-animation {
    from {
        transform: scale(1);
        opacity: 1;
    }

    to {
        transform: scale(0);
        opacity: 0;
    }
}

@keyframes hide-note-preview-label {
    from {
        top: 50%;
    }

    to {
        top: -150%;
    }
}

@keyframes show-note-preview-label {
    from {
        top: 150%;
    }

    to {
        top: 50%;
    }
}