@import './globals.scss';

.Ribbon{
    position: relative;
    overflow: hidden;
    display: inline-block;
    box-sizing: border-box;
    // Eddit the padding to 
    // add more ribbon html
    // over the context
    padding: 3px;

    .ribbon-holder{
        position: absolute;
        box-sizing: border-box;
        padding: 5px 10px;
        text-align: center;
        width: 200px;
        min-height: 30px;
        background-color: var(--rr-ribbon-background);
        z-index: 2;
        line-height: 30px;
    }

    .ribbon{
        position: relative;
        color: var(--rr-ribbon-color);
    }

    .ribbon-corners{
        position: absolute;
    }

    .ribbon-corners:before,
    .ribbon-corners:after{
        content: '';
        position: absolute;
        width: 100px;
        height: 30px;
        background-color: var(--rr-ribbon-corner-background);
    }

    .content-data{
        position: relative;
        display: inline-block;
        box-sizing: border-box;
        padding:3px;

        .content{
            background-color: $white;
        }
    }
}

// Directions

.ribbon-top-left{

    .ribbon-holder{
        top: 30px;
        left: -50px;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    .ribbon-corners{
        top:0;
        left:0;
    }

    .ribbon-corners:before,
    .ribbon-corners:after{
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .ribbon-corners:before{
        top: 0px;
        left: 70px;
    }
    
    .ribbon-corners:after{
        top: 100px;
        right: -60px;
    }   
}

.ribbon-top-right{

    .ribbon-holder{
        top: 30px;
        right: -50px;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .ribbon-corners{
        top:0;
        right:0;
    }

    .ribbon-corners:before,
    .ribbon-corners:after{
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    .ribbon-corners:before{
        top: 0px;
        left: -170px;
    }
    
    .ribbon-corners:after{
        top: 100px;
        right: -40px;
    }   
}

.ribbon-bottom-right{

    .ribbon-holder{
        bottom: 20px;
        right: -50px;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        top: auto;
    }

    .ribbon-corners{
        bottom:0;
        right:0;
    }

    .ribbon-corners:before,
    .ribbon-corners:after{
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .ribbon-corners:before{
        bottom: 0px;
        left: -165px;
    }
    
    .ribbon-corners:after{
        bottom: 110px;
        right: -30px;
    }   
}

.ribbon-bottom-left{

    .ribbon-holder{
        bottom: 20px;
        left: -50px;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        top: auto;
    }

    .ribbon-corners{
        bottom:0;
        left:0;
    }

    .ribbon-corners:before,
    .ribbon-corners:after{
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    .ribbon-corners:before{
        bottom: 0px;
        left: 62px;
    }
    
    .ribbon-corners:after{
        bottom: 100px;
        right: -68px;
    }   
}

// Types

.ribbon-type-1{
    .ribbon-holder{
        width: auto;
    }
}

.ribbon-top-left.ribbon-type-1{

    .ribbon-holder{
        top: 30px;
        left: 0px;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    .ribbon-corners{
        top: 30px;
        left: 0;
    }

    .ribbon-corners:before{
        height: 0;
        width: 0;
        top: -5px;
        left: 1px;
        border-bottom: 9px solid var(--rr-ribbon-corner-background);
        border-left: 9px solid transparent;
        transform: rotateZ(45deg);
    }
    
    .ribbon-corners:after{
        content: unset;
    }   
}
    
.ribbon-top-right.ribbon-type-1{
    
    .ribbon-holder{
        top: 30px;
        right: 0px;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    .ribbon-corners{
        top: 30px;
        right: 0;
    }

    .ribbon-corners:before,
    .ribbon-corners:after{
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    .ribbon-corners:before{
        height: 0;
        width: 0;
        top: -5px;
        right: 3px;
        left: auto;
        border-bottom: 9px solid var(--rr-ribbon-corner-background);
        border-left: 9px solid transparent;
        transform: rotateZ(45deg);
    }
    
    .ribbon-corners:after{
        content: unset;
    } 
}

.ribbon-bottom-right.ribbon-type-1{
    
    .ribbon-holder{
        bottom: 30px;
        right: 0px;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    .ribbon-corners{
        bottom: 30px;
        right: 0;
    }

    .ribbon-corners:before,
    .ribbon-corners:after{
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    .ribbon-corners:before{
        height: 0;
        width: 0;
        top: -5px;
        right: 3px;
        left: auto;
        border-bottom: 9px solid var(--rr-ribbon-corner-background);
        border-left: 9px solid transparent;
        transform: rotateZ(45deg);
    }
    
    .ribbon-corners:after{
        content: unset;
    } 
}
    
.ribbon-bottom-left.ribbon-type-1{

    .ribbon-holder{
        bottom: 30px;
        left: 0px;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    .ribbon-corners{
        bottom: 30px;
        left: 0;
    }

    .ribbon-corners:before{
        height: 0;
        width: 0;
        bottom: -5px;
        left: 1px;
        right: auto;
        border-bottom: 9px solid var(--rr-ribbon-corner-background);
        border-left: 9px solid transparent;
        transform: rotateZ(45deg);
    }
    
    .ribbon-corners:after{
        content: unset;
    }   
}

.ribbon-type-2{
    .ribbon-holder{
        width: auto;
        border-radius: 5px;
    }
}

.ribbon-top-left.ribbon-type-2{

    .ribbon-holder{
        top: 30px;
        left: 0px;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    .ribbon-corners{
        top: 30px;
        left: 0;
    }

    .ribbon-corners:before{
        width: 8px;
        height: 35px;
        top: 5px;
        left: 0px;
        padding: 0 0 7px;
        background: var(--rr-ribbon-background);
        border-radius: 5px;
        transform: rotateZ(0deg);
    }
    
    .ribbon-corners:after{
        width: 5px;
        height: 5px;
        top: 40px;
        left: 1px;
        background: var(--rr-ribbon-corner-background);
        border-radius: 5px;
    }   
}
    
.ribbon-top-right.ribbon-type-2{
    
    .ribbon-holder{
        top: 30px;
        right: 0px;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    .ribbon-corners{
        top: 30px;
        right: 0;
    }

    .ribbon-corners:before{
        width: 8px;
        height: 35px;
        top: 5px;
        left: -7px;
        padding: 0 0 7px;
        background: var(--rr-ribbon-background);
        border-radius: 5px;
        transform: rotateZ(0deg);
    }
    
    .ribbon-corners:after{
        width: 5px;
        height: 5px;
        top: 40px;
        right: 1px;
        background: var(--rr-ribbon-corner-background);
        border-radius: 5px;
    }   
}

.ribbon-bottom-right.ribbon-type-2{
    
    .ribbon-holder{
        bottom: 30px;
        right: 0px;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    .ribbon-corners{
        bottom: 30px;
        right: 0;
    }

    .ribbon-corners:before{
        width: 8px;
        height: 35px;
        bottom: 5px;
        left: -7px;
        padding: 0 0 7px;
        background: var(--rr-ribbon-background);
        border-radius: 5px;
        transform: rotateZ(0deg);
    }
    
    .ribbon-corners:after{
        width: 5px;
        height: 5px;
        bottom: 40px;
        right: 1px;
        background: var(--rr-ribbon-corner-background);
        border-radius: 5px;
    }   
}
    
.ribbon-bottom-left.ribbon-type-2{

    .ribbon-holder{
        bottom: 30px;
        left: 0px;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    .ribbon-corners{
        bottom: 30px;
        left: 0;
    }

    .ribbon-corners:before{
        width: 8px;
        height: 35px;
        bottom: 5px;
        left: 0px;
        padding: 0 0 7px;
        background: var(--rr-ribbon-background);
        border-radius: 5px;
        transform: rotateZ(0deg);
    }
    
    .ribbon-corners:after{
        width: 5px;
        height: 5px;
        bottom: 40px;
        left: 1px;
        background: var(--rr-ribbon-corner-background);
        border-radius: 5px;
    }   
}