// ==========================================
// == Luna Framework
// == AUTHOR: CLAUDE MYBURGH
// == URL: http://designbycode.co.za
// ==========================================

$ribbon__text__color: #fff

.ribbon__wrapper
    position: relative

@each $key, $value in $_color_set
    .ribbon--#{$key},
    .ribbon--#{$key}-gradient
        &::before,
        &::after
            border: 5px solid darken($value, 20%)   

.ribbon 
    width: 150px
    height: 150px
    overflow: hidden
    position: absolute
    z-index: 10

    &::before,
    &::after 
        position: absolute
        z-index: -1
        content: ''
        display: block

    &__label 
        position: absolute
        display: block
        width: 225px
        padding: 15px 0
        box-shadow: 0 5px 10px rgba(0,0,0,.1)
        color: $ribbon__text__color
        font-weight: 700 
        font-size: 18px
        line-height: 1
        // font: 700 18px/1 'Lato', sans-serif
        text-shadow: 0 1px 1px rgba(0,0,0,.2)
        text-transform: uppercase
        text-align: center
        @extend .selectable__false

    @each $key, $value in $_color_set

        &--#{$key}
            .ribbon

                &__label 
                    background-color: $value
                    color: $ribbon__text__color

            &-gradient

                .ribbon

                    &__label 
                        background: $value
                        background: linear-gradient(180deg, $value, darken($value, 10%))

    /* top left*/
    &--top-left 
        top: -10px
        left: -10px

    &--top-left::before,
    &--top-left::after 
        border-top-color: transparent
        border-left-color: transparent

    &--top-left::before 
        top: 0
        right: 0

    &--top-left::after 
        bottom: 0
        left: 0

    &--top-left &__label 
        right: -25px
        top: 30px
        transform: rotate(-45deg)

    /* top right*/
    &--top-right 
        top: -10px
        right: -10px

    &--top-right::before,
    &--top-right::after 
        border-top-color: transparent
        border-right-color: transparent

    &--top-right::before 
        top: 0
        left: 0

    &--top-right::after 
        bottom: 0
        right: 0

    &--top-right &__label 
        left: -25px
        top: 30px
        transform: rotate(45deg)

    /* bottom left*/
    &--bottom-left 
        bottom: -10px
        left: -10px

    &--bottom-left::before,
    &--bottom-left::after 
        border-bottom-color: transparent
        border-left-color: transparent

    &--bottom-left::before 
        bottom: 0
        right: 0

    &--bottom-left::after 
        top: 0
        left: 0

    &--bottom-left &__label 
        right: -25px
        bottom: 30px
        transform: rotate(45deg)

    /* bottom right*/
    &--bottom-right 
        bottom: -10px
        right: -10px

    &--bottom-right::before,
    &--bottom-right::after 
        border-bottom-color: transparent
        border-right-color: transparent

    &--bottom-right::before 
        bottom: 0
        left: 0

    &--bottom-right::after 
        top: 0
        right: 0

    &--bottom-right &__label 
        left: -25px
        bottom: 30px
        transform: rotate(-45deg)