PronounsPage/components/Separator.vue

<script setup lang="ts">
withDefaults(defineProps<{
    icon?: string;
    colour?: string;
}>(), {
    colour: 'primary',
});
</script>

<template>
    <div :class="`separator separator-${colour}`">
        <div class="mask"></div>
        <span v-if="icon"><Icon :v="icon" /></span>
    </div>
</template>

<style lang="scss" scoped>
    @import "assets/variables";

    // https://front-back.com/pure-css-3-fancy-separator/

    $size: 50px;

    .separator {
        margin-top: $size;
        position: relative;

        > .mask {
            overflow: hidden;
            height: 0.5 * $size;
            &:after {
                content:'';
                display: block;
                margin: -0.5 * $size auto 0;
                width: 100%;
                height: 0.5 * $size;
                border-radius: 125px / 12px;
            }
        }
        > span {
            width: $size;
            height: $size;
            position: absolute;
            bottom: 100%;
            margin-bottom: -0.5 * $size;
            left: 50%;
            margin-inline-start: -0.5 * $size;
            border-radius: 100%;
            display: grid;
            place-items: center;
        }
    }

    @each $color, $value in $theme-colors {
        .separator-#{$color} {
            > .mask {
                &:after {
                    box-shadow: 0 0 calc($size / 5) $value;
                }
            }
            > span {
                box-shadow:0 2px 4px $value;
                background: tint-color($value, 80%);
                color: $value;
            }
        }
    }
</style>