.action-swoosh {
    --action-swoosh-background: transparent;
    --action-swoosh-color: var(--color-text);
    --action-swoosh-active-color: var(--color-stage-text);
    --action-swoosh-fill-first: var(--color-heading);
    --action-swoosh-fill-second: var(--color-accent);
    position: relative;
    isolation: isolate;
    overflow: clip;
    background: var(--action-swoosh-background);
    color: var(--action-swoosh-color);
    contain: paint;
    transition:
        color var(--action-swoosh-color-duration) ease-out,
        transform var(--action-swoosh-scale-duration) var(--action-swoosh-jelly-ease);
}

.action-swoosh--primary {
    --action-swoosh-background: var(--color-action);
    --action-swoosh-color: var(--color-heading);
    --action-swoosh-active-color: var(--color-heading);
    --action-swoosh-fill-first: var(--color-turquoise);
    --action-swoosh-fill-second: var(--color-action);
    display: inline-flex;
    height: var(--primary-action-height);
    align-items: center;
    justify-content: center;
    gap: var(--primary-action-icon-gap);
    padding-inline: var(--primary-action-padding);
    border-radius: var(--primary-action-radius);
    font-weight: 400;
    line-height: 1;
    text-transform: initial;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.action-swoosh__icon {
    position: relative;
    z-index: 2;
    display: block;
    width: var(--primary-action-icon-size);
    height: var(--primary-action-icon-size);
    flex: 0 0 auto;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    transform-origin: center;
    transition: transform var(--action-swoosh-text-duration) var(--action-swoosh-jelly-ease);
}

.action-swoosh::before,
.action-swoosh::after {
    position: absolute;
    z-index: 0;
    top: -0.0625rem;
    right: -14%;
    bottom: -0.0625rem;
    left: -14%;
    border-radius: inherit;
    content: "";
    pointer-events: none;
    transform: translate3d(0, 165%, 0) rotate(-12deg) scaleY(1.18);
    transform-origin: 50% 100%;
    transition: transform var(--action-swoosh-layer-duration) var(--action-swoosh-ease);
}

.action-swoosh::before {
    background: var(--action-swoosh-fill-first);
    transition-delay: -0.04s;
}

.action-swoosh::after {
    background: var(--action-swoosh-fill-second);
    transition-delay: -0.08s;
}

.action-swoosh__text {
    position: relative;
    z-index: 2;
    display: grid;
    overflow: hidden;
    line-height: 1;
}

.action-swoosh__text-current,
.action-swoosh__text-next {
    grid-area: 1 / 1;
    transition:
        opacity 0.2s ease-out,
        transform var(--action-swoosh-text-duration) var(--action-swoosh-jelly-ease);
}

.action-swoosh__text-next {
    color: var(--action-swoosh-active-color);
    opacity: 0;
    transform: translate3d(0, 1.55em, 0) rotate(-28deg);
    transform-origin: top right;
}

.action-swoosh:focus-visible {
    outline: 0.125rem solid var(--color-heading);
    outline-offset: -0.25rem;
}

@media (hover: hover) and (pointer: fine) {
    .action-swoosh:is(:hover, :focus-visible) {
        color: var(--action-swoosh-active-color);
        transform: scaleX(0.985) scaleY(0.98);
    }

    .action-swoosh:is(:hover, :focus-visible)::before {
        transform: translate3d(0, 0, 0) rotate(0deg) scaleY(1.18);
        transition-delay: 0s;
    }

    .action-swoosh:is(:hover, :focus-visible)::after {
        transform: translate3d(0, 0, 0) rotate(0deg) scaleY(1.18);
        transition-delay: 0.064s;
    }

    .action-swoosh:is(:hover, :focus-visible) .action-swoosh__text-current {
        opacity: 0;
        transform: translate3d(0, -1.55em, 0) rotate(-42deg);
    }

    .action-swoosh:is(:hover, :focus-visible) .action-swoosh__text-next {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(0deg);
        transition-delay: 0.1s;
    }

    .action-swoosh:is(:hover, :focus-visible) .action-swoosh__icon {
        transform: translate3d(0.18rem, -0.08rem, 0) rotate(12deg) scale(1.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .action-swoosh,
    .action-swoosh::before,
    .action-swoosh::after,
    .action-swoosh__icon,
    .action-swoosh__text-current,
    .action-swoosh__text-next {
        transition: none;
    }
}