/*------------------------------------------------------------------

  Angled Images

-------------------------------------------------------------------*/
.angled-img {
    position: relative;
    display: block;

    @include cssShape;

    &,
    &:hover,
    &:focus {
        color: inherit;
        text-decoration: none;
        outline: none;
    }

    // image
    .img {
        position: relative;
        overflow: hidden;
        -webkit-transform: skew(-$skew_size);
        transform: skew(-$skew_size);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        background: $back_color;
        -webkit-backface-visibility: hidden;

        > img {
            width: 100%;
            -webkit-transform: skew($skew_size) scale(1.15);
            transform: skew($skew_size) scale(1.15);
            -webkit-transition: .3s opacity ease;
            transition: .3s opacity ease;
            -webkit-backface-visibility: hidden;
            opacity: $images_opacity;
        }

        // image offset
        &.img-offset {
            -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
        }
    }
    &:hover .img > img {
        opacity: $images_hover_opacity;
    }

    // icon
    .icon {
        font-size: 5rem;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -25px;
        margin-left: -25px;
        opacity: 0.2;
        -webkit-transition: .3s opacity ease;
        transition: .3s opacity ease;
    }
    &:hover .icon {
        opacity: 0.8;
    }

    // price
    .price {
        font-weight: bold;
        del {
            color: $text_mute_color;
        }
    }

    // heading
    h4 {
        font-weight: bold;
    }

    // badge
    .badge {
        position: absolute;
        left: 0;
        top: 0;
        border-radius: 0;
        font-size: 1.5rem;
        padding: 10px 15px;
        -webkit-transition: .3s opacity ease;
        transition: .3s opacity ease;
        -webkit-backface-visibility: hidden;
        opacity: 0;
        &.show-half {
            opacity: 0.5;
        }
        &.show {
            opacity: 1;
        }
    }
    &:hover .badge {
        opacity: 1;
    }

    // info over image
    .over-info {
        position: absolute;
        top: 0;
        left: 0;
        width: 90%;
        height: 100%;
        margin-left: 5%;
        text-align: center;
        
        // bottom pos
        &.bottom {
            top: auto;
            bottom: 0;
            height: auto;
            text-align: left;
        }

        // heading and rating
        h4,
        .rating {
            margin-top: 1.2rem;
            margin-bottom: 1.2rem;
        }

        // vertical center
        > div {
            display: table;
            height: 100%;
            width: 100%;
            > div {
                display: table-cell;
                vertical-align: middle;
            }
        }
    }

    // item info
    .bottom-info {
        width: 100%;
        text-align: center;
        margin: 0 auto;
        margin-bottom: 1.8rem; // bottom margin like in top from H4

        h4 {
            position: relative;
            text-align: center;
            margin-top: 1.8rem;
            margin-bottom: 3rem;

            // border bottom
            &:after {
                content: '';
                position: absolute;
                bottom: -1.5rem;
                left: 0;
                width: 100%;
                height: 1px;
                background: $text_mute_color;
            }
        }
    }
}


/*------------------------------------------------------------------

  Angled Backgrounds

-------------------------------------------------------------------*/
.angled-bg {
    position: relative;
    display: block;

    // all items inside - over background
    > * {
        position: relative;
        z-index: 2;
    }


    // angled background
    &:after {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba($text_color, 0.1);
        -webkit-transform: skew(-$skew_size);
        transform: skew(-$skew_size);
        z-index: 0;
        -webkit-transition: .3s background ease;
        transition: .3s background ease;
    }
    &:hover:after {
        background: rgba($text_color, 0.13);
    }

    &.item {
        display: block;
        width: 100%;
        margin-bottom: 2rem;

        // initial color
        &:hover,
        &:focus {
            color: inherit;
        }

        // price
        .price {
            margin-top: 10px;
            margin-right: 20px;
            font-size: 1.6rem;
            font-weight: bold;
        }

        // remove icon
        .remove,
        .remove:hover,
        .remove:focus {
            font-size: 1.7rem;
            margin-top: 5px;
            margin-right: 20px;
            text-decoration: none;
        }
    }
}