$fa-font-path: "~font-awesome/fonts";

@import "~font-awesome/scss/font-awesome";
@import "~bootswatch/dist/superhero/variables";
@import "~bootstrap/scss/bootstrap";
@import "~bootswatch/dist/superhero/bootswatch";
@import "~react-bootstrap-toggle/dist/bootstrap2-toggle.css";

// Change all buttons to small on xs
@include media-breakpoint-between(xs,sm){
    .btn {
        @include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm);
    }
}

$body-padding-top: $navbar-padding-y + 3rem;

body {
  padding-top: $body-padding-top;
}

.object-fit-cover {
    object-fit: cover;
}

.object-position-top {
    object-position: top;
}

.mh-40vh {
    max-height: 40vh;
}

// Remove borders from the navbar
.navbar-toggler,
div.show.dropdown.nav-item > div {
    border: none;
}

.thumbnail-selected {
    transition: border 400ms ease-in-out;
    animation-name: select-thumbnail;
    animation-duration: 400ms;
    animation-fill-mode: forwards;
}
@keyframes select-thumbnail {
    0%   { background-color: $secondary; }
    100% { background-color: $primary;   }
}

.clickable {
    cursor: pointer;
}

.plot {
    text-align: justify;
    max-height: 50%;
    overflow: auto;
}

.poster-list {
  img {
      max-height: 20rem;
      object-fit: cover;
      max-width: 100%;
      flex-basis: content;
  }
}

.list-details {
    position: sticky;
    top: $body-padding-top;
    z-index: 1000;
    height: calc(100vh - #{$body-padding-top});
}

.video-details {
    font-size: $font-size-sm;
    p {
        margin-bottom: .3rem;
    }

}
@include media-breakpoint-up(sm) {
    .video-details {
        font-size: $font-size-base;
        p {
            margin-bottom: $paragraph-margin-bottom;
        }
    }
}

.show-thumbnail {
    max-height: 300px;
}

div.sweet-alert > h2 {
    color: $body-bg;
}

.player-modal {
    width: 90%;
}