/* 
 *  Created on : 06.01.2017, 00:20:27
 *  @copyright : Samet Tarim
 *  @author    : Samet Tarim
 *  @link      : http://www.samet-tarim.de/
 */

.mb-lps-slider {

    position: relative;
    width: 100%;
    padding: 5px 0;

    .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));
    }

    h3 {

        margin: 0 40px;
        padding: 10px;
    }

    .mb-lps-slider-wrapper {

        position: relative;
        white-space: nowrap;
        overflow: hidden;
        margin: 0 40px;

        .box-sizing();

        &.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;
            }
        }

        .mb-lps-slider-item {

            display: inline-block;
            vertical-align: top;

            width: 100%;

            @media only screen and (min-width: 550px) and (max-width: 768px) {
                width: (100%/2);
            }
            @media only screen and (min-width: 768px) {
                width: (100%/3);
            }
            @media only screen and (min-width: 1280px) {
                width: (100%/4);
            }
            height: 100%;

            margin: 0;
            padding: 0;

            .box-sizing();

            .mb-lps-slider-item-wrap {

                display: block;
                height: 220px;
                margin: 5px;
                text-decoration: none;

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

                    height: 240px;
                }

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

                    height: 280px;
                }

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

                    height: 300px;
                }

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

                    height: 330px;
                }

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

                    height: 350px;
                }

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

                    height: 240px;
                }

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

                    height: 280px;
                }

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

                    height: 240px;
                }

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

                    height: 260px;
                }

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

                    height: 285px;
                }

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

                    height: 270px;
                }

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

                    height: 330px;
                }

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

                    height: 350px;
                }

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

                    height: 330px;
                }

                &.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));
                }

                h3 {

                    padding: 0 4.7%;
                }

                p {

                    padding: 0 4.7%;
                }

                .mb-lps-slider-item-image {

                    display: block;
                    min-height: 100px;

                    &._16_9 {

                        .aspect-ratio();
                    }

                    &.border-small {

                        border: 2px solid #fff;
                    }

                    &.border-middle {

                        border: 5px solid #fff;
                    }

                    &.border-big {

                        border: 10px solid #fff;
                    }

                    img {

                        width: 100%;
                        height: 100%;
                        border-radius: 0;

                        .box-shadow(none);
                    }
                }

                .mb-lps-slider-item-title {

                    overflow: hidden;
                    display: block;
                    margin: 0;

                    white-space: normal;
                    text-overflow: ellipsis;
                }


                .mb-lps-slider-item-meta {

                    padding: 0 4.7%;
                    margin: 0;
                    white-space: normal;

                    span {

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

                        &:first-child {

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

                        &:last-child {

                            border: 0;
                        }
                    }
                }

                .mb-lps-slider-item-description {

                    overflow: hidden;
                    display: block;
                    white-space: normal;
                }
            }
        }
    }

    .mb-lps-slider-control-left, .mb-lps-slider-control-right {
        border: solid black;
        border-width: 0 3px 3px 0;
        display: inline-block;
        padding: 0px;
        outline: none;
        height: 21px;
        width: 20px;
    }

    .mb-lps-slider-control-left {

        position:absolute;
        top: 50%; 
        z-index: 10;

        left: 15px;

        .rotate(135deg);
    } 

    .mb-lps-slider-control-right {

        position:absolute;
        top: 50%; 
        z-index: 10;

        right: 15px;

        .rotate(-45deg);
    }
}