/*  COMPONENT: SEPARATOR 
//////////////////////////////////////////////////////////////////////////////*/

@layer components {
    .component--separator {
        padding: 0;
    }
    .component--separator.right .separator > * {
        left: auto;
        right: 0;
        text-align: right;
    }
    .separator {
        pointer-events: none;
        position: relative;
        border-top: var(--spacing-xs) solid;
    }
    .separator > * {
        position: absolute;
        top: 0;
        left: 0;
        margin: 0;
        padding: 0 var(--spacing-s) var(--spacing-xs) var(--spacing-s);
        font-size: var(--font-size-m);
        min-width: fit-content;
        text-align: left;
        font-size: var(--font-size-l);
        /* aspect-ratio: 1/1; */
    }
    @media (max-width: 640px) {
        .separator > * {
            position: relative;
            right: 0 !important;
            text-align: left !important;
            padding-left: var(--spacing-m);
        }
        .component--separator.right .separator > * {
            right: var(--spacing-m);
        }
    }

    .separator--yellow {
        border-color: var(--color-mbz-yellow-500);
    }
    .separator--yellow > * {
        background: var(--color-mbz-yellow-500);
        color: var(--color-mbz-yellow-800);
    }

    .separator--red {
        border-color: var(--color-mbz-red-500);
    }
    .separator--red > * {
        background: var(--color-mbz-red-500);
        color: var(--color-mbz-red-50);
    }

    .separator--petrol {
        border-color: var(--color-mbz-petrol);
    }
    .separator--petrol > * {
        background: var(--color-mbz-petrol);
        color: var(--color-mbz-petrol-50);
    }

    .separator--beige {
        border-color: var(--color-mbz-beige-200);
    }
    .separator--beige > * {
        background: var(--color-mbz-beige-200);
        color: var(--color-mbz-beige-800);
    }

    .separator--grey {
        border-color: var(--color-mbz-grey-100);
    }
    .separator--grey > * {
        background: var(--color-mbz-grey-100);
        color: var(--color-mbz-grey-800);
    }

    .separator--blue {
        border-color: var(--color-mbz-blue);
    }
    .separator--blue > * {
        background: var(--color-mbz-blue);
        color: var(--color-white);
    }
}