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

@include media-breakpoint-down(md) {
    .w-md-100 {
        width: 100%;
    }
}

$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;
}

.poster-list {
    img {
        display: block;
        height: auto;
        width: 100%;
        max-width:12rem;
        max-height:18rem;
    }
}

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

.video-details {
    > div, > p, > span {
        margin-bottom: 1rem;
        @media (max-height: 820px) {
            margin-bottom: 0.5rem;
        }
        @media (max-height: 580px) {
            margin-bottom: 0rem;
        }
    }
}

.show-season > div.card-body {
    background-color: rgba($body-bg, .5)
}

.episode-thumb {
    img {
        @include media-breakpoint-down(md) {
            width: 100%;
            margin-bottom: 1rem;
        }

        display: block;
        height: auto;
        max-width:40rem;
        max-height:22.5rem;
    }
}

.show-thumbnail {
    max-height: 30rem;
}

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

.player-modal {
    width: 90%;
}

.title {
    font-size: 1.5rem;
    @include media-breakpoint-down(md) {
        font-size: 1.2rem;
    }
}

.wishlist-button:hover > i {
    color: $primary;
}

.notifications {
    position: fixed;
    top: $body-padding-top;
    z-index: $zindex-fixed;
    max-height: calc(100vh - #{$body-padding-top});
    right: 1rem;
    width: 18rem;
}

.toast-header {
    background-color: $card-cap-bg;
    color: $gray-100;

    > button > span {
        color: $white;
    }
}

.toast {
    background-color: $card-bg;
}

.link-unstyled, .link-unstyled:link, .link-unstyled:hover {
  color: inherit;
  text-decoration: inherit;
}