@import url('../../styles/normalize.css');
@import url('../../styles/main.css');

.szdl-separator-02__fill[data-height="40px"] {
    --heigth: 40px;
}

.szdl-separator-02__fill[data-height="50px"] {
    --heigth: 50px;
}

.szdl-separator-02__fill[data-height="60px"] {
    --heigth: 60px;
}

.szdl-separator-02__fill[data-height="70px"] {
    --heigth: 70px;
}

.szdl-separator-02__fill[data-height="80px"] {
    --heigth: 80px;
}

.szdl-separator-02__fill[data-height="90px"] {
    --heigth: 90px;
}

.szdl-separator-02__fill[data-height="100px"] {
    --heigth: 100px;
}

.szdl-separator-02__fill[data-height="125px"] {
    --heigth: 125px;
}

.szdl-separator-02__fill[data-height="150px"] {
    --heigth: 150px;
}

.szdl-separator-02__fill[data-height="175px"] {
    --heigth: 175px;
}

.szdl-separator-02__fill[data-height="200px"] {
    --heigth: 200px;
}

.szdl-separator-02__fill[data-height="225px"] {
    --heigth: 225px;
}

.szdl-separator-02__fill[data-height="250px"] {
    --heigth: 250px;
}

.szdl-separator-02__fill[data-height="275px"] {
    --heigth: 275px;
}

.szdl-separator-02__fill[data-height="300px"] {
    --heigth: 300px;
}

.szdl-separator-02 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--heigth);

    perspective: 1px;
    overflow: hidden;
}

.szdl-separator-02__fill {
    width: 0;
    height: 0;
    
    border-color: hsla(205, 1%, 50%, 0.85);
    border-left: 100vw solid hsla(205, 1%, 50%, 0.85);
    border-top: var(--heigth) solid hsla(0, 0%, 87%, 0.85);
}