/* ==========================================================
   LR SOOMI AUDIO TOGGLE
   Version: 1.2.0
   Namespace: lr-soomi-audio-toggle
   ========================================================== */


/* ==========================================================
   ROOT
   ========================================================== */

.lr-soomi-audio-toggle {
    --lr-audio-toggle-duration: 280ms;
    --lr-audio-toggle-switch-duration: 150ms;
    --lr-audio-toggle-easing: cubic-bezier(0.22, 1, 0.36, 1);

    cursor: pointer;

    user-select: none;
    -webkit-user-select: none;

    -webkit-tap-highlight-color: transparent;
}


/* ==========================================================
   LABEL
   ========================================================== */

.lr-soomi-audio-toggle__label {
    transition:
        transform 180ms
        var(--lr-audio-toggle-easing);

    will-change:
        transform;
}


.lr-soomi-audio-toggle__label .elementor-heading-title {
    display: block;

    transition:
        opacity var(--lr-audio-toggle-switch-duration)
        var(--lr-audio-toggle-easing),

        transform 220ms
        var(--lr-audio-toggle-easing),

        filter 180ms
        var(--lr-audio-toggle-easing);

    opacity: 1;

    transform:
        translateY(0);

    filter:
        blur(0);

    will-change:
        opacity,
        transform,
        filter;
}


/* ==========================================================
   LABEL — SWITCH
   ========================================================== */

.lr-soomi-audio-toggle__label.is-switching
.elementor-heading-title {
    opacity: 0;

    transform:
        translateY(-35%);

    filter:
        blur(3px);
}


/* ==========================================================
   ICON
   ========================================================== */

.lr-soomi-audio-toggle__icon {
    transition:
        transform 180ms
        var(--lr-audio-toggle-easing);

    will-change:
        transform;
}


.lr-soomi-audio-toggle__icon img {
    display: block;

    transition:
        opacity var(--lr-audio-toggle-switch-duration)
        var(--lr-audio-toggle-easing),

        transform 220ms
        var(--lr-audio-toggle-easing),

        filter 180ms
        var(--lr-audio-toggle-easing);

    opacity: 1;

    transform:
        scale(1)
        rotate(0deg);

    filter:
        blur(0);

    will-change:
        opacity,
        transform,
        filter;
}


/* ==========================================================
   ICON — SWITCH
   ========================================================== */

.lr-soomi-audio-toggle__icon.is-switching img {
    opacity: 0;

    transform:
        scale(0.72)
        rotate(-8deg);

    filter:
        blur(3px);
}


/* ==========================================================
   ACTIVE FEEDBACK
   ========================================================== */

.lr-soomi-audio-toggle:active
.lr-soomi-audio-toggle__icon {
    transform:
        scale(0.94);
}


/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

.lr-soomi-audio-toggle:focus-visible {
    outline:
        1px solid currentColor;

    outline-offset:
        4px;
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .lr-soomi-audio-toggle__label,
    .lr-soomi-audio-toggle__label .elementor-heading-title,
    .lr-soomi-audio-toggle__icon,
    .lr-soomi-audio-toggle__icon img {
        transition-duration:
            0.01ms;
    }

}