@if use_component('ribbon') {
    // .ribbon-added-widget {
    //     position: relative;
    // }
    .ribbon {
        position: absolute;
        display: block;
        text-align: center;
    }
    .ribbon-text {
        display: block;
        font-size: 1.2rem;
        color: #fff;
        line-height: 1;
        letter-spacing: -.025em;
        text-transform: uppercase;
    }
    .ribbon-icon {
        i {
            font-size: 1.8rem;
            color: #fff;
        }
    }

    // Ribbon Position
    .ribbon-top-left {
        top: 0;
        left: 0;
    }
    .ribbon-top-right {
        top: 0;
        right: 0;
    }
    .ribbon-bottom-left {
        bottom: 0;
        left: 0;
    }
    .ribbon-bottom-right {
        bottom: 0;
        right: 0;
    }

    // Ribbon Type 1
    .ribbon-type-1 {
        .ribbon-inner {
            position: relative;
            background-color: #ff835d;
            padding: 1rem 1.5rem;
        }
        &.ribbon-top-left {
            .ribbon-inner {
                top: 2rem;
                left: -3px;
            }
        }
        &.ribbon-top-right {
            .ribbon-inner {
                top: 2rem;
                right: -3px;
            }
        }
        &.ribbon-bottom-right {
            .ribbon-inner {
                bottom: 2rem;
                right: -3px;
            }
        }
        &.ribbon-bottom-left {
            .ribbon-inner {
                bottom: 2rem;
                left: -3px;
            }
        }
    }

    // Ribbon Type 2
    .ribbon-type-2 {
        .ribbon-inner {
            position: relative;
            background-color: #62a8ea;
            padding: 1rem 1.5rem;
            &::after {
                display: block;
                position: absolute;
                content: '';
                height: 0px;
                width: 7px;
                color: #62a8ea;
            }
        }
        &.ribbon-top-left {
            .ribbon-inner {
                top: 2rem;
                left: -7px;
                &::after {
                    bottom: -7px;
                    left: 0px;
                    border-left: 7px solid transparent;
                    border-top: 7px solid;
                }
            }
        }
        &.ribbon-top-right {
            .ribbon-inner {
                top: 2rem;
                right: -7px;
                &::after {
                    bottom: -7px;
                    right: 0px;
                    border-right: 7px solid transparent;
                    border-top: 7px solid;
                }
            }
        }
        &.ribbon-bottom-right {
            .ribbon-inner {
                bottom: 2rem;
                right: -7px;
                &::after {
                    bottom: -6px;
                    right: 0px;
                    border-right: 7px solid transparent;
                    border-top: 7px solid;
                }
            }
        }
        &.ribbon-bottom-left {
            .ribbon-inner {
                bottom: 2rem;
                left: -7px;
                &::after {
                    bottom: -6px;
                    left: 0px;
                    border-left: 7px solid transparent;
                    border-top: 7px solid;
                }
            }
        }
    }

    // Ribbon Type 3
    .ribbon-type-3 {
        .ribbon-inner {
            position: absolute;
            padding: 2.2rem 1rem;
            background-color: #46be8a;
        }
        &.ribbon-top-left .ribbon-inner {
            left: 3rem;
        }
        &.ribbon-top-right .ribbon-inner {
            right: 3rem;
        }
        &.ribbon-bottom-left .ribbon-inner {
            bottom: 0;
            left: 3rem;
        }
        &.ribbon-bottom-right .ribbon-inner {
            bottom: 0;
            right: 3rem;
        }
    }

    // Ribbon Type 4
    .ribbon-type-4 {
        .ribbon-inner {
            position: absolute;
            top: -50px;
            left: -50px;
            width: 100px;
            height: 100px;
            background-color: #5449ff;
            transform: rotateZ(45deg);
        }
        .ribbon-icon {
            display: block;
            position: relative;
            width: 100%;
            height: 100%;
            i {
                position: absolute;
                font-size: 1.8rem;
                color: #fff;
                transform: translate(-50%, -50%);
            }
        }
        &.ribbon-top-left {
            .ribbon-icon i {
                top: 50%;
                left: 80%;
            }
        }
        &.ribbon-top-right {
            .ribbon-icon i {
                top: 80%;
                left: 50%;
            }
        }
        &.ribbon-bottom-left {
            .ribbon-icon i {
                top: 20%;
                left: 50%;
            }
        }
        &.ribbon-bottom-right {
            .ribbon-icon i {
                top: 50%;
                left: 20%;
            }
        }
    }

    // Ribbon Type 5
    .ribbon-type-5 {
        .ribbon-inner {
            position: absolute;
            display: block;
            text-align: center;
            padding: .9rem 1.5rem;
            background-color: #5449ff;
            width: 200px;
        }
        &.ribbon-top-left .ribbon-inner {
            top: 10px;
            left: -75px;
            transform: rotateZ(-45deg);
        }
        &.ribbon-top-right .ribbon-inner {
            top: 10px;
            right: -75px;
            transform: rotateZ(45deg);
        }
        &.ribbon-bottom-left .ribbon-inner {
            bottom: 10px;
            left: -75px;
            transform: rotateZ(45deg);
        }
        &.ribbon-bottom-right .ribbon-inner {
            bottom: 10px;
            right: -75px;
            transform: rotateZ(-45deg);
        }
    }

    // Ribbon Type 6
    .ribbon-type-6 {
        .ribbon-inner {
            position: relative;
            background-color: #62a8ea;
            padding: 1rem 2rem;
            &::after {
                display: block;
                position: absolute;
                content: '';
                height: 0px;
                width: 7px;
                color: #62a8ea;
            }
        }
        &.ribbon-top-left {
            .ribbon-inner {
                top: 2rem;
                left: -7px;
                border-radius: 0 100px 100px 0;
                &::after {
                    bottom: -7px;
                    left: 0px;
                    border-left: 7px solid transparent;
                    border-top: 7px solid;
                }
            }
        }
        &.ribbon-top-right {
            .ribbon-inner {
                top: 2rem;
                right: -7px;
                border-radius: 100px 0 0 100px;
                &::after {
                    bottom: -7px;
                    right: 0px;
                    border-right: 7px solid transparent;
                    border-top: 7px solid;
                }
            }
        }
        &.ribbon-bottom-right {
            .ribbon-inner {
                bottom: 2rem;
                right: -7px;
                border-radius: 100px 0 0 100px;
                &::after {
                    bottom: -6px;
                    right: 0px;
                    border-right: 7px solid transparent;
                    border-top: 7px solid;
                }
            }
        }
        &.ribbon-bottom-left {
            .ribbon-inner {
                bottom: 2rem;
                left: -7px;
                border-radius: 0 100px 100px 0;
                &::after {
                    bottom: -6px;
                    left: 0px;
                    border-left: 7px solid transparent;
                    border-top: 7px solid;
                }
            }
        }
    }

    // Ribbon Type 7
    .ribbon-type-7 {
        .ribbon-inner {
            position: absolute;
            padding: 1.5rem 2rem;
            background-color: $primary-color;
            &::after {
                display: block;
                position: absolute;
                content: '';
                height: 0px;
                width: 5px;
                color: #0a47a4;
            }
        }
        &.ribbon-top-left .ribbon-inner {
            top: -5px;
            left: 2rem;
            transform: rotateZ(90deg) translateY(-100%);
            transform-origin: left top;
            &::after {
                top: -5px;
                left: 0px;
                border-right: 5px solid;
                border-top: 5px solid transparent;            
            }
        }
        &.ribbon-top-right .ribbon-inner {
            top: -5px;
            right: 2rem;
            transform: rotateZ(90deg) translateX(100%);
            transform-origin: right top;
            &::after {
                bottom: -5px;
                left: 0px;  
                border-top: 5px solid;
                border-left: 5px solid transparent;
            }
        }
        &.ribbon-bottom-left .ribbon-inner {
            bottom: -5px;
            left: 2rem;
            transform: translateX(-100%) rotateZ(90deg);
            transform-origin: right bottom;
            &::after {
                top: -5px;
                right: 0px;
                border-left: 5px solid;
                border-top: 5px solid transparent;            
            }
        }
        &.ribbon-bottom-right .ribbon-inner {
            bottom: -5px;
            right: 2rem;
            transform: rotateZ(90deg) translateY(100%);
            transform-origin: right bottom;
            &::after {
                bottom: -5px;
                right: 0px;
                border-top: 5px solid;
                border-right: 5px solid transparent;
            }
        }
    }
}