.left,
.top,
.right,
.bottom {
    position: relative;
}

.left::before,
.top::after,
.right::before,
.bottom::after {
    z-index: 100;
}

.left::before {
    box-sizing: border-box;
    content: "";
    display: block;
    position: absolute;
    width: calc(100% + var(--stroke)*1);
    left: calc(-0.5 * var(--stroke));

    height: 100%;
    top: 0px;
    border-left: var(--stroke) solid var(--mainColor);
}

.top::after {
    box-sizing: border-box;
    content: "";
    display: block;
    position: absolute;
    height: calc(100% + var(--stroke)*1 + var(--gap));
    top: calc(-0.5 * var(--stroke));
    width: 100%;
    left: 0px;
    border-top: var(--stroke) solid var(--mainColor);
}

.right::before {
    z-index: 110;
    box-sizing: border-box;
    content: "";
    display: block;
    position: absolute;
    width: calc(100% + var(--stroke)*1);
    left: calc(-0.5 * var(--stroke));
    height: 100%;
    top: 0px;
    border-right: var(--stroke) solid var(--mainColor);
}

.bottom::after {
    box-sizing: border-box;
    content: "";
    display: block;
    position: absolute;
    height: calc(100% + var(--stroke)*1);
    top: calc(-0.5 * var(--stroke));
    width: 100%;
    left: 0px;
    border-bottom: var(--stroke) solid var(--mainColor);
}

.left.smallB::before,
.top.smallB::after,
.right.smallB::before,
.bottom.smallB::after {
    height: calc(100% + var(--smallB)*1);
    top: calc(-0.5 * var(--smallB));
    border-bottom: var(--smallB) solid var(--mainColor);
}

.invert {
    color: var(--bgColor);
    background-color: var(--mainColor);
}

.gray {
    background-color: var(--middleColor);
}

.invertBorder:before,
.invertBorder:after {
    border-color: var(--bgColor);
}

.grayBorder:before,
.grayBorder:after {
    border-color: var(--middleColor);
}

.rRotate {
    padding: var(--vGap) var(--hGap) var(--vGap) var(--hGap);
}

.borderPad {
    padding-bottom: 1px;
}

/* ------------------------------------------------------------------------------------------------ BORDERS */

@media screen and (orientation: portrait) {
    .rInvert {
        color: var(--bgColor);
        background-color: var(--mainColor);
    }

    .rRotateContainer {
        height: 100%;
        /* width: 100%; */
        width: fit-content;
    }

    .rRotate {
        writing-mode: vertical-rl;
        text-orientation: mixed;
        /* transform-origin: left top; */
        transform: rotate(-180deg);
        text-align: right;
        padding: var(--hGap) var(--vGap) var(--hGap) var(--vGap);
        /* tr */
    }

    .rNoLeft::before {
        border-left: none !important;
    }

    .rNoRight::before {
        border-right: none !important;
    }

    .rNoBottom::after {
        border-bottom: none !important;
    }

    .rNoTop::after {
        border-top: none !important;
    }

    .rLeft,
    .rTop,
    .rRight,
    .rBottom {
        position: relative;
    }

    .rLeft::before,
    .rTop::after,
    .rRight::before,
    .rBottom::after {
        z-index: 100;
    }

    .rLeft::before {
        box-sizing: border-box;
        content: "";
        display: block;
        position: absolute;
        width: calc(100% + var(--stroke)*1);
        left: calc(-0.5 * var(--stroke));

        height: 100%;
        top: 0px;
        border-left: var(--stroke) solid var(--mainColor);
    }

    .rTop::after {
        box-sizing: border-box;
        content: "";
        display: block;
        position: absolute;
        height: calc(100% + var(--stroke)*1 + var(--gap));
        top: calc(-0.5 * var(--stroke));
        width: 100%;
        left: 0px;
        border-top: var(--stroke) solid var(--mainColor);
    }

    .rRight::before {
        z-index: 110;
        box-sizing: border-box;
        content: "";
        display: block;
        position: absolute;
        width: calc(100% + var(--stroke)*1);
        left: calc(-0.5 * var(--stroke));
        height: 100%;
        top: 0px;
        border-right: var(--stroke) solid var(--mainColor);
    }

    .rBottom::after {
        box-sizing: border-box;
        content: "";
        display: block;
        position: absolute;
        height: calc(100% + var(--stroke)*1);
        top: calc(-0.5 * var(--stroke));
        width: 100%;
        left: 0px;
        border-bottom: var(--stroke) solid var(--mainColor);
    }
}