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

  Clan Wars

-------------------------------------------------------------------*/
.youplay-match {
    display: inline-block;
    white-space: nowrap;

    .angled-img {
        display: inline-block;
        vertical-align: top;
        width: 150px;

        .img > img {
            opacity: 1;
        }
    }

    .youplay-match-data {
        position: relative;
        display: inline-block;
        padding: 1.8rem 3rem;
        margin-left: -4px;
        margin-right: -4px;
        height: 151px;

        // background
        &:after {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba($back_darken_color, 0.4);
            -webkit-transform: skew(-$skew_size);
            transform: skew(-$skew_size);
            z-index: 1;
        }
        > * {
            position: relative;
            z-index: 2;
        }

        h3 {
            font-size: 3.5rem;
            text-transform: uppercase;
            margin-top: 3.5rem;
            margin-bottom: 0;
        }
    }
}
.youplay-match-left {
    text-align: right;
}
.youplay-match-left,
.youplay-match-right {
    @media #{$media-sm} {
        text-align: center;
    }
    @media #{$media-xs} {
        text-align: center;
    }
}
.youplay-match-vs {
    position: relative;
    display: inline-block;
    font-size: 2.5rem;
    padding: 1rem 1.5rem;
    margin-top: 4.7rem;
    margin-bottom: 4.7rem;

    // background
    &:after {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba($back_darken_color, 0.4);
        -webkit-transform: skew(-$skew_size);
        transform: skew(-$skew_size);
        z-index: 1;
    }
    > * {
        position: relative;
        z-index: 2;
    }
}


/* Game Maps */
.youplay-game-maps {
    .youplay-single-map {
        padding-left: 1rem;

        &:after,
        &:before {
            content: '';
            display: table;
            clear: both;
        }

        .angled-img {
            max-width: 10rem;
            float: left;

            img {
                opacity: 1;
            }
        }

        .youplay-single-map-description {
            margin-left: 13rem;
        }

        + .youplay-single-map {
            margin-top: 2rem;
        }
    }
}


/* Matches List */
.youplay-matches-list {
    .youplay-single-match {
        display: block;
        padding-top: 1rem;
        padding-bottom: 1rem;

        border-bottom: 1px solid rgba($text_color, 0.1);

        + .youplay-single-match {
            margin-top: 2rem;
        }

        .youplay-match-title {
            -webkit-transition: .3s color ease;
            transition: .3s color ease;
        }
        &:hover .youplay-match-title {
            color: $main_color;
        }

        .angled-img {
            max-width: 10rem;

            img {
                opacity: 1;
            }
        }

        .youplay-match-count {
            float: right;
            font-size: 2rem;
            margin-top: 3rem;
            padding: 1rem 2rem;
        }

        // styles for sidebar widget
        .side-block & {
            text-decoration: none;

            + .youplay-single-match {
                margin-top: 1rem;
            }

            .angled-img {
                max-width: 4rem;
            }

            .youplay-match-count {
                font-size: 1rem;
                margin-top: 1rem;
                padding: 0.5rem;
            }
        }
    }
}


/* Match Widget */
.youplay-match-widget {
    text-align: center;

    &, &:hover {
        text-decoration: none;
    }
    
    .youplay-match-title {
        -webkit-transition: .3s color ease;
        transition: .3s color ease;
    }
    &:hover .youplay-match-title {
        color: $main_color;
    }
}