/* ========================================
    COMPONENTE: SECTION DIVIDER
    ========================================
*/

:root {
    --line-width: 60%;
    --line-height: 2px;

    --diamond-size: 12px;
    --diamond-rotate: rotate(45deg);

    --divider-mb: var(--spacing-l);
}

.section__divider {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: fit-content;
    margin-bottom: var(--divider-mb);
}

.divider--line {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--line-width);
    height: var(--line-height);
    background-color: rgb(204,204,204);
    border-radius: calc(var(--line-height)/2);
    box-shadow: none;
    &::before {
        background-color: var(--color-accent);
        width: var(--diamond-size);
        height: var(--diamond-size);
        transform: var(--diamond-rotate);
        border-radius: calc(var(--diamond-size)/12);
        content: "";
        z-index: 10;
    }
}