@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
@import "node_modules/bootstrap/scss/buttons";
@import "node_modules/bootstrap/scss/grid";
@import "node_modules/bootstrap/scss/dropdown";
@import 'starrating';

$color_body: #eeeeee;
$body-color: #333;

.masvideos-control-bar {
	display: flex;
	margin-bottom: 1em;
	flex-direction: column;
	align-items: center;

	form {
		margin-bottom: 0;

		@media only screen and (min-width: 768px) {
			margin-left: auto;
		}
	}

	.masvideos-result-count {
		margin: 0;
	}

	@media only screen and (min-width: 768px) {
		flex-direction: row;
		align-items: flex-start;
	}
}

.masvideos-page-control-bar {
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: space-between;

	@media only screen and (min-width: 768px) {
		flex-direction: row;
		align-items: flex-start;
	}
}

.masvideos-Reviews .star-rating {
	width: auto;
	height: auto !important;
	float: none !important;

	&:before {
		content: none;
	}
}


/**
 * Archive Pages
 */

.tv-show__hover-area {
	display: none;
}

 .post-type-archive-movie {
 	.movies>.movies__inner .movie {
 		margin-bottom: 20px;
 	}
 }

.masvideos-loop-video__title,
.masvideos-loop-movie__title,
.masvideos-loop-tv-show__title,
.masvideos-loop-episode__title {
	font-size: 1.3em;
	margin-top: 0;
}

.videos__inner,
.movies__inner,
.tv-shows__inner,
.episodes__inner {
    @include make-row();
}

.videos__inner > .video,
.movies__inner > .movie,
.tv-shows__inner > .tv-show,
.episodes__inner > .episode  {
    @include make-col-ready();
    margin-top: 0;
}

.video-actions--link_add-to-playlist.dropdown,
.movie-actions--link_add-to-playlist.dropdown,
.tv-show-actions--link_add-to-playlist.dropdown {
	position: relative;

	.dropdown-menu {
		a {
			display: block;
		    width: 100%;
		    padding: 3px 1.5rem;
		    clear: both;
		    font-weight: 400;
		    text-align: inherit;
		    white-space: normal;
		    background: 0 0;
		    border: 0;
		}
	}
}

.tv-show__actions,
.movie__actions,
.video__actions {
	display: flex;
	margin-bottom: 20px;
	flex-direction: column;

	.movie-actions--link_watch,
	.video-actions--link_watch,
	.tv-show-actions--link_watch {
		line-height: 1.2;

        @media only screen and (min-width: 1199px) {
            margin-right: 10px;
        }
	}

	@media only screen and (min-width: 1199px) {
		flex-direction: row;
		align-items: center;
	}

}

.movie__short-description,
.video__short-description,
.tv-show__short-description {
	display: none;
}

.masvideos {
	.summary {
		.movie__short-description {
			display: block;
		}
	}
}

.movie-actions--link_add-to-playlist > a,
.tv-show-actions--link_add-to-playlist > a,
.video-actions--link_add-to-playlist > a {
	border: 0;
    background: 0 0;
    background-color: $color_body;
    border-color: $color_body;
    color: $body-color;
    cursor: pointer;
    padding: .6180469716em 1.41575em;
    text-decoration: none;
    font-weight: 600;
    text-shadow: none;
    display: inline-block;
    outline: 0;
    -webkit-appearance: none;
    border-radius: 0;

  @include hover-focus() {
    color: $body-color;
    text-decoration: none;
    background-color: #d5d5d5;
    border-color: #d5d5d5;
  }

  &:focus,
  &.focus {
    outline: 0;
    box-shadow: $btn-focus-box-shadow;
  }

}

.video__badge,
.movie__badge,
.tv-show__badge {
	position: absolute;
	top: 0;
	border: 1px solid;
    border-color: #43454b;
    color: #43454b;
    padding: .202em .6180469716em;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 1em;
    border-radius: 3px;

}

    
.masvideos-pagination {
	.page-numbers {
		list-style: none;

		li {
			display: inline-block;

			.page-numbers.current {
			    background-color: #e6e6e6;
				color: #636363;
			}

			.page-numbers {
				border-left-width: 0;
			    display: inline-block;
			    padding: .3342343017em .875em;
			    background-color: rgba(0,0,0,.025);
			    color: #43454b;
			}
		}
	}
}

.movie__avg-rating,
.tv-show__avg-rating,
.episode__avg-rating {
	.avg-rating {
		display: flex;
		&:before {
			font-family: dashicons;
			content: "\f155";
		}
	}

	.avg-rating__inner {
		display: flex;
		flex-direction: column;
	}

	.avg-rating__number,
	.avg-rating__text {
		display: block;
		line-height: 1;

	}
}

.single-movie,
.single-tv_show {
	.movie__avg-rating,
	.tv-show__avg-rating {
		margin-bottom: 20px;
	}
}

.masvideos-tabs {
	clear: both;
	overflow: hidden;
	padding: 1em 0;

	ul.nav {
		list-style: none;
		margin-left: 0;
		text-align: left;
		@media only screen and (min-width: 768px) {
			@include make-col(3);
			float: left;
		}

		li {
			display: block;
			margin: 0;
			position: relative;

			a {
				padding: 1em 0;
				display: block;
			}
		}
	}

	.tab-content {
		@media only screen and (min-width: 768px) {
			@include make-col(9);
			float: left;
		}

		h2:first-of-type {
			font-size: ms(3);
			margin-bottom: 1em;
		}
	}

	.tab-content > .tab-pane {
      display: none;
    }

    .tab-content > .active {
      display: block;
    }
}


.videos,
.movies,
.tv-shows,
.episodes {
	>.videos__inner .video,
	>.movies__inner .movie,
	>.tv-shows__inner > .tv-show,
	>.episodes__inner > .episode {
        @include make-col(6);
        padding-right: 6px;
        padding-left: 6px;

        @media only screen and (min-width: 768px) {
            @include make-col(6);
            padding-right: 15px;
            padding-left: 15px;
        }

        @media only screen and (min-width: 992px) {
            @include make-col(3);
        }
    }
       
	
	@media only screen and (min-width: 992px) {
        &.columns-1 {
            >.videos__inner .video,
            >.movies__inner .movie,
            >.tv-shows__inner > .tv-show,
            >.episodes__inner > .episode {
                @include make-col(12);
            }
        }
        &.columns-2 {
            >.videos__inner .video,
            >.movies__inner .movie,
            >.tv-shows__inner > .tv-show,
            >.episodes__inner > .episode {
                @include make-col(6);
            }
        }
        &.columns-3 {
            >.videos__inner .video,
            >.movies__inner .movie,
            >.tv-shows__inner > .tv-show,
            >.episodes__inner > .episode {
                @include make-col(4);
            }
        }

        &.columns-4 {
            >.videos__inner .video,
            >.movies__inner .movie,
            >.tv-shows__inner > .tv-show,
            >.episodes__inner > .episode {
                @include make-col(3);
            }
        }

        &.columns-5 {
            >.videos__inner .video,
            >.movies__inner .movie,
            >.tv-shows__inner > .tv-show,
            >.episodes__inner > .episode {
                @include make-col(2.4);
            }
        }

        &.columns-6 {
            >.videos__inner .video,
            >.movies__inner .movie,
            >.tv-shows__inner > .tv-show,
            >.episodes__inner > .episode {
                @include make-col(2);
            }
        }

        &.columns-7 {
            >.videos__inner .video,
            >.movies__inner .movie,
            >.tv-shows__inner > .tv-show,
            >.episodes__inner > .episode {
                @include make-col(1.71428571);
            }
        }

        &.columns-8 {
            >.videos__inner .video,
            >.movies__inner .movie,
            >.tv-shows__inner > .tv-show,
            >.episodes__inner > .episode {
                @include make-col(1.5);
            }
        }
    }
}

/**
 * Single page
 */

.single-video .video,
.single-movie .movie,
.single-tv_show .tv-show,
.single-episode .episode{
	.video__player,
	.movie__head,
	.tv-show__head,
	.episode__head {
		@media only screen and (min-width: 992px) {
			position: relative;
			float: left;
			width: 48%;
		}
	}

	div.summary {
		margin: 0;
		padding: 0;
		max-width: 100%;

		@media only screen and (min-width: 992px) {
			float: right;
			width: 48%;
			clear: none;
			
		}
	}

	.masvideos-video-gallery,
	.single-video__related,
	.movie__related,
	.single-tv_show__related,
	.masvideos-Reviews,
	.masvideos-tabs {
		clear: both;
	}
}

/**
 * Single Movie
 */

.single-movie {
	.movie__description-tab {
		display: flex;
        flex-wrap: wrap;
		justify-content: space-between;
		flex-direction: column;

		@media only screen and (min-width: 992px) {
			flex-direction: row;
		}

		.movie{
			&__info--left {
				display: flex;
				align-items: center;
				flex-direction: column;

				@media only screen and (min-width: 992px) {
					flex-direction: row;
				}

				flex: 0 0 100%;
				max-width: 100%;
				@media only screen and (min-width: 992px) {
					flex: 0 0 60%;
			    	max-width: 60%;
				}
			}

			&__info--right {
				flex: 0 0 100%;
				max-width: 100%;
				@media only screen and (min-width: 992px) {
					flex: 0 0 40%;
				    max-width: 40%;
				}
			}

			&__poster {
				flex: 0 0 100%;
				max-width: 100%;

				@media only screen and (min-width: 992px) {
					margin-right: 40px;
				    flex: 0 0 24.1%;
				    max-width: 24.1%;
				}
			}
			&__body {
				@media only screen and (max-width: 768px) {
					flex: 0 0 100%;
					max-width: 100%;
				}
			}
		}
	}
}

.masvideos-videos-pagination {
    border-top: 1px solid #e8e8e8;
    padding-top: 20px;
    margin-bottom: 15px;

    .page-numbers {
        flex-wrap: wrap;
        justify-content: center;
    }
}