@white-color: #555555;
@white-background: #f0f0f0;
@red-background: #ee4433;
@black-background: #333333;
@grey-background: #999999;
@blue-background: #3399dd;
@green-background: #22cc77;
@turquoise-background: #11bb99;
@purple-background: #9955bb;
@orange-background: #ee8822;
@yellow-background: #eecc00;

@transform: 45deg;
@left: -45px;
@right: -45px;
@top: 10px;
@bottom: 10px;

//
//  Common
//  _____________________________________________

& when (@media-common = true) {
    .corner-ribbon {
        background: @red-background;
        color: @white-background;
        font-size: 17px;
        left: @left;
        letter-spacing: 1px;
        line-height: 35px;
        position: absolute;
        text-align: center;
        top: @top;
        width: 150px;
        z-index: 9999999;
        transform: rotate(-@transform);

        &:hover {
            cursor: pointer;
        }

        &.sticky {
            position: fixed;
        }

        &.shadow {
            box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
        }

        &.top-left {
            top: @top;
            left: @left;
            transform: rotate(-@transform);
        }

        &.top-right {
            top: @top;
            left: auto;
            right: @right;
            transform: rotate(@transform);
        }

        &.bottom-left {
            top: auto;
            left: @left;
            bottom: @bottom;
            transform: rotate(@transform);
        }

        &.bottom-right {
            top: auto;
            left: auto;
            bottom: @bottom;
            right: @right;
            transform: rotate(-@transform);
        }

        &.white {
            background: @white-background;
            color: @white-color;
        }

        &.black {
            background: @black-background;
        }

        &.grey {
            background: @grey-background;
        }

        &.blue {
            background: @blue-background;
        }

        &.green {
            background: @green-background;
        }

        &.turquoise {
            background: @turquoise-background;
        }

        &.purple {
            background: @purple-background;
        }

        &.red {
            background: @red-background;
        }

        &.orange {
            background: @orange-background;
        }

        &.yellow {
            background: @yellow-background;
        }
    }
}