.wrapper.svelte-13s1dt7.svelte-13s1dt7 {
    contain: strict;
    position: relative;
    width: 32px;
    height: 32px;
    display: grid;
    place-content: center;
    --gradient: linear-gradient( rgb(255 245 195 / .5), rgb(255 245 195 / 1), rgb(255 245 195 / .5))
}

.wrapper.svelte-13s1dt7 button.svelte-13s1dt7 {
    position: absolute;
    width: 32px;
    height: 32px;
    top: 0;
    left: 0;
    z-index: 2;
    opacity: 0
}

.wrapper.svelte-13s1dt7 .icon.svelte-13s1dt7 {
    position: relative;
    contain: strict;
    display: grid;
    place-content: center;
    height: 24px;
    width: 24px
}

.wrapper.svelte-13s1dt7 .bars.svelte-13s1dt7 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 18px;
    height: 20px;
    contain: strict
}

.wrapper.svelte-13s1dt7 .bars .bar.svelte-13s1dt7 {
    width: 1px;
    height: 20px;
    background: var(--gradient);
    transition-property: transform;
    transition-duration: .85s;
    transition-timing-function: var(--ease-in-out-quint);
    animation-name: svelte-13s1dt7-sound;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate
}

.wrapper.svelte-13s1dt7 .bars .bar--1.svelte-13s1dt7 {
    transform: scaleY(.75);
    animation-duration: 564ms;
    animation-delay: 5ms
}

.wrapper.svelte-13s1dt7 .bars .bar--2.svelte-13s1dt7 {
    transform: scaleY(1);
    animation-duration: 653ms
}

.wrapper.svelte-13s1dt7 .bars .bar--3.svelte-13s1dt7 {
    transform: scaleY(.33);
    animation-duration: 517ms;
    animation-delay: 1ms
}

.wrapper.svelte-13s1dt7 .bars .bar--4.svelte-13s1dt7 {
    transform: scaleY(.1);
    animation-duration: 553ms;
    animation-delay: 2.3ms
}

.wrapper.svelte-13s1dt7 .diagonal.svelte-13s1dt7 {
    position: absolute;
    height: 24px;
    width: 24px;
    display: flex;
    align-items: center
}

.wrapper.svelte-13s1dt7 .diagonal .line.svelte-13s1dt7 {
    width: 24px;
    height: 1px;
    background: var(--gradient);
    transform: rotate(-45deg) scaleX(0);
    opacity: 0;
    transition-property: transform, opacity;
    transition-duration: .85s, .75s;
    transition-delay: 0s, .1s;
    transition-timing-function: var(--ease-in-out-quint)
}

.wrapper.svelte-13s1dt7 .line.svelte-13s1dt7:after,
.wrapper.svelte-13s1dt7 .bar.svelte-13s1dt7:after {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgb(var(--color-bright));
    opacity: 0;
    transition-property: opacity;
    transition-duration: .35s;
    transition-timing-function: var(--ease-in-out-quad)
}

.wrapper.muted.svelte-13s1dt7 .bar.svelte-13s1dt7 {
    animation-name: svelte-13s1dt7-muted;
    animation-fill-mode: both;
    animation-iteration-count: 1
}

.wrapper.muted.svelte-13s1dt7 .line.svelte-13s1dt7 {
    transform: rotate(-45deg) scaleX(1);
    opacity: 1
}

.wrapper.over.svelte-13s1dt7 .bar.svelte-13s1dt7:after,
.wrapper.over.svelte-13s1dt7 .line.svelte-13s1dt7:after {
    opacity: 1
}

@keyframes svelte-13s1dt7-sound {
    0% {
        opacity: .45;
        transform: scaleY(.05)
    }
    to {
        opacity: 1;
        transform: scaleY(1)
    }
}

@keyframes svelte-13s1dt7-muted {
    to {
        opacity: 1;
        transform: scaleY(.05)
    }
}