/* 
 *  Created on : 04.02.2017, 20:53:45
 *  @copyright : Samet Tarim
 *  @author    : Samet Tarim
 *  @link      : http://www.samet-tarim.de/
 */

.swiper {

    position: relative;
    padding: 1em 40px;

    .user-select();

    .swiper-container {

        padding: 5px;

        .user-select();
        .box-sizing();

        &.shadow {

            .box-shadow(0 1px 3px 0 rgba(0,0,0,.3));
        }

        &.shadow-inset {

            .box-shadow(inset 0 1px 3px 0 rgba(0,0,0,.3));
        }

        .swiper-wrapper {

            .user-select();

            &.described {

                height: 320px;

                @media only screen and (min-width: 320px) {

                    height: 380px;
                }

                @media only screen and (min-width: 340px) {

                    height: 420px;
                }

                @media only screen and (min-width: 420px) {

                    height: 400px;
                }

                @media only screen and (min-width: 460px) {

                    height: 400px;
                }

                @media only screen and (min-width: 550px) {

                    height: 380px;
                }

                @media only screen and (min-width: 640px) {

                    height: 420px;
                }

                @media only screen and (min-width: 768px) {

                    height: 380px;
                }

                @media only screen and (min-width: 900px) {

                    height: 340px;
                }

                @media only screen and (min-width: 1000px) {

                    height: 390px;
                }

                @media only screen and (min-width: 1100px) {

                    height: 310px;
                }

                @media only screen and (min-width: 1200px) {

                    height: 470px;
                }

                @media only screen and (min-width: 1400px) {

                    height: 490px;
                }

                @media only screen and (min-width: 1600px) {

                    height: 490px;
                }
            }

            .swiper-slide {

                display: block;
                margin-top: 10px;
                margin-bottom: 10px;

                .user-select();

                &.shadow {

                    .box-shadow(0 1px 3px 0 rgba(0,0,0,.3));
                }

                &.shadow-inset {

                    .box-shadow(inset 0 1px 3px 0 rgba(0,0,0,.3));
                }

                &.described {

                    height: 320px;

                    @media only screen and (min-width: 320px) {

                        height: 340px;
                    }

                    @media only screen and (min-width: 340px) {

                        height: 380px;
                    }

                    @media only screen and (min-width: 420px) {

                        height: 400px;
                    }

                    @media only screen and (min-width: 460px) {

                        height: 300px;
                    }

                    @media only screen and (min-width: 550px) {

                        height: 340px;
                    }

                    @media only screen and (min-width: 640px) {

                        height: 380px;
                    }

                    @media only screen and (min-width: 768px) {

                        height: 340px;
                    }

                    @media only screen and (min-width: 900px) {

                        height: 300px;
                    }

                    @media only screen and (min-width: 1000px) {

                        height: 350px;
                    }

                    @media only screen and (min-width: 1100px) {

                        height: 370px;
                    }

                    @media only screen and (min-width: 1200px) {

                        height: 430px;
                    }

                    @media only screen and (min-width: 1400px) {

                        height: 450px;
                    }

                    @media only screen and (min-width: 1600px) {

                        height: 430px;
                    }
                }

                > a {

                }

                .item-highlight {

                    height: 100%;

                    &-link {

                        display: inline-block;
                        color: orange;
                        padding: 0 4.7%;

                        &:after {

                            display: block;
                            content: " ";
                            width: 5px;
                            height: 5px;
                            border: solid currentColor;
                            border-width: 0 .1em .1em 0;
                            display: inline-block;
                            color: orange;

                            .rotate(-45deg);

                            @media @screen-md {
                                width: 10px;
                                height: 10px;
                            }
                            @media @screen-lg {
                                width: 10px;
                                height: 10px;
                            }
                            @media @screen-xl {
                                width: 11px;
                                height: 11px;
                            }
                            @media @screen-xxl {
                                width: 12px;
                                height: 12px;
                            }
                        }
                    }
                }

                .image-overlay {

                    display: none;
                    visibility: hidden;
                    opacity: 0;
                }

                .item-image {

                    display: block;
                    min-height: 100px;

                    &._16_9 {

                        .aspect-ratio();

                        div {

                            width: 100%;
                            height: 100%;
                        }
                    }

                    &.border-small {

                        border: 2px solid #fff;
                    }

                    &.border-middle {

                        border: 5px solid #fff;
                    }

                    &.border-big {

                        border: 10px solid #fff;
                    }

                    > div {

                        display: block;
                        max-width: 100%;
                        max-height: 100%;
                        min-height: 230px;
                        height: 100%;
                    }
                }

                .item-title {

                    padding: 0 4.7%;
                    margin: 20px 0 auto;
                }

                .item-meta {

                    padding: 0 4.7%;
                    margin: 0;

                    span {

                        padding: 0 .3em;
                        border-right: 1px solid #ddd;
                        font-size: .8em;

                        &:first-child {

                            padding-left: 0;
                            padding-right: .3em;
                        }

                        &:last-child {

                            border: 0;
                        }
                    }
                }

                .item-description {

                    overflow: hidden;
                    display: block;
                    white-space: normal;
                    padding: 0 4.7%;
                }
            }
        }
    }

    .swiper-button-prev {

    }

    .swiper-button-next {

    }
}