<script lang="ts">
    let {
        label,
    }: {
        label: string
    } = $props()
</script>

<span>
    <img
        src="/media/bottomRightCrinkleRed.svg"
        id="lefternCrinkle"
        alt="crinkle"
    />
    <em>
        {label}
    </em>
    <img
        id="righternCrinkle"
        src="/media/topLeftCrinkleRed.svg"
        alt="crinkle"
    />
</span>

<style lang="less">
    span {
        background: var(--primary-100);
        padding: 6px 12px;
        display: flex;
        flex-direction: row;
        height: fit-content;
        gap: 0.5rem;
        position: relative;
        font-size: 20px;

        img {
            position: absolute;
            top: 0px;
            width: unset !important;
        }
        #righternCrinkle {
            right: -7px;
        }
        em {
            color: var(--neutral-white);
            font-weight: 400;
            font-size: 1em;
            line-height: 14px;
            font-family: "Outfit", sans-serif;
            font-style: normal;
        }
        #lefternCrinkle {
            left: -7px;
        }
        &.smallVersion {
            #righternCrinkle {
                right: -6px;
            }

            em {
                font-size: 0.7em;
                line-height: 9px;
            }
        }
    }
</style>
