$width: 1200px;
$height: 500px;
$margin: auto;
$book-recom: 450px;

html,body{
    padding: 0;
    margin: 0;
}

#bookshelf{
    width: $width;
    margin: 20px $margin;
    display: flex;

    &>div{
        display: flex;
        width: 100%;
        align-items: flex-end;
        flex-wrap: wrap;
    }

    .book-box{
        width: 60%;
        display: flex;
        flex-direction: column;
        text-align: center;
    }

    .book-recom{
        width: 30%;
        height: $book-recom;
        box-sizing: border-box;
        border: 13px dashed white;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 0;
        margin-left: auto;
        box-shadow: 7px -7px 10px 8px rgba(0, 0, 0, 0.1),
                    -7px 7px 10px 8px rgba(0, 0, 0, 0.1), 
                    inset -4px 4px 11px 6px rgba(0,0,0,0.1), 
                    inset 4px -4px 11px 6px rgba(0,0,0,0.1);
        
        img {
            max-width: 98%;
            max-height: 96%;
        }
    }

    .book-all-movies{
        width: 100%;
        margin-top: 30px;
        border: 0.5px solid #e9e9e9;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 20px;

        .movie-item{
            width: 80%;
            display: table;
            padding-top: 10px;
            margin-top: 20px;
            box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
            padding: 1em;
            border-radius: 4px;
            
            &:first-child{
                border-top-width: 0;
            }

            &>img,& .movie-item-info{
                display: table-cell;
                vertical-align: top;
            }

            & .movie-item-info{
                word-break: break-all;
                word-wrap: normal;
            }

            .movie-item-info ul{
                list-style: none;

                li{
                    margin-bottom: 0.4em;
                }

                li>a{
                    text-decoration-line: none;
                }

                li>span {
                    padding-right: 1em;
                }

                li.intro{
                    color: #666;
                }
                
                li.name{
                    margin-bottom: 1em;
                }

                span.rating{
                    background-image: url(../image/ic_rating_s@2x.png);
                    display: none;
                }

                @for $i from 0 through 5 {
                    span.rating#{$i}-t {
                        width: 55px;
                        height: 11px;
                        background-repeat: no-repeat;
                        background-position-y: -(10 - 2 * $i) * 11px;
                        background-position-x: 0;
                        display: inline-block;
                    }
                }
            }
            
            &>img{
                width: 160px;
            }
        }

    }

    h3{
        text-align: center;
    
    }

    #play{
        width: 100%;
        display: flex;
        align-items: center;
        padding-left: 0;
        margin-top: 20px;
        max-height: 420px;
        ol{
            margin: auto;
            box-shadow: 0 2px 2px 0 rgba(0,0,0,.07), 0 1px 5px 0 rgba(0,0,0,.1);
            list-style: none;
            width: 25%;
            min-height: 300px;
            overflow-y: scroll;
            max-height: 350px;
            padding: 0;
        }
        ol::-webkit-scrollbar {
            width: 5px;
        }
        ol::-webkit-scrollbar-thumb {
            border-radius: 3px;
            background-color: #eee;
        }
        li {
            position: relative;
            height: 32px;
            line-height: 32px;
            padding: 0 15px;
            font-size: 14px;
            border-top: 1px solid #e9e9e9;
            cursor: pointer;
            padding-left: 15px;
            transition: all .2s ease;
            overflow: hidden;
            margin: 0;
            color: #666;
            span.video-list-index{
                display: inline-block;
                padding-right: 10px;
                width: 25px;
                text-align: center;
            }
        }

        li.play-now::before {
            content: '';
            display: block;
            top: 0;
            left: 0;
            position: absolute;
            width: 2px;
            height: 100%;
            background: red;
        }
        li.play-now {
            background: #E9E9EA;
            color: black;
        }

        video{
            object-fit: cover;
        }
        
    }
    
    .book-list {
        height: $height - 20px;
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        line-height: 0;


        .list-item{
            flex: 3 1 0;

            &:nth-child(4),&:nth-child(5){
                flex: 2 1 0;
            }

            &[data-style="list-big"] {
                flex: 3.8 1 0;
            }

            $order: (1:'3',4:'1',3:'4',2:'2',5:'5');
            @each $k,$v in $order {
                &:nth-child(#{$k}){
                    order: #{$v};
                }
            }
            
        }


        img{
            width: 100%;
        }
    }

    .book-outline{
        flex-grow: 0;
        height: 20px;
        background: white;
        box-shadow: 0 -0.5px 0 0.5px rgba(0, 0, 0, 0.07), 
                    1px 1px 0 1px rgba(97, 94, 94, 0.05), 
                    1px 19px 13px 2px #b7b1b17d;
    }
}