/* _content/Flags/Components/Flag.razor.rz.scp.css */
@keyframes oscillate-b-pwgr0ik6gr {
    from {
        transform: translateY(var(--billow));
    }

    to {
        transform: translateY(calc(var(--billow) * -1));
    }
}

.flag[b-pwgr0ik6gr] {
    display: flex;
    aspect-ratio: 3 / 2;
}

.column[b-pwgr0ik6gr] {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* 800ms duration gives it that heavier fabric feel */
    animation: oscillate-b-pwgr0ik6gr 800ms alternate infinite ease-in-out both;
}

    .column:first-child[b-pwgr0ik6gr] {
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
    }

    .column:last-child[b-pwgr0ik6gr] {
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
    }

.waving-flag-animation[b-pwgr0ik6gr] {
    transform-origin: left center;
    animation: wave-b-pwgr0ik6gr 2s ease-in-out infinite alternate;
}

@keyframes wave-b-pwgr0ik6gr {
    0% {
        transform: perspective(400px) rotateY(0deg) translateY(0px);
    }

    100% {
        transform: perspective(400px) rotateY(15deg) translateY(-5px);
    }
}