.ribbon-container {
    position: relative;
    overflow: hidden;
}

.corner-ribbon {
    position: absolute;
    width: $ribbon-width;
    height: $ribbon-height;
    color: var(--white);
    font-size: $ribbon-font-size;
    line-height: $ribbon-height;
    letter-spacing: $ribbon-letter-spacing;
    text-align: center;
    background-color: var(--deprecated-medium-grey);

    &.left {
        left: $ribbon-x-offset;
    }

    &.right {
        right: $ribbon-x-offset;
    }

    &.top {
        top: $ribbon-y-offset;

        &.right {
            transform: rotate($ribbon-rotation-angle);
        }

        &.left {
            transform: rotate(-$ribbon-rotation-angle);
        }
    }

    &.bottom {
        bottom: $ribbon-y-offset;

        &.right {
            transform: rotate(-$ribbon-rotation-angle);
        }

        &.left {
            transform: rotate($ribbon-rotation-angle);
        }
    }
}