@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap");

$grid-breakpoints: (
    xs: 0,
    sm: 456px,
    md: 689px,
    lg: 900px,
    xl: 1450px
);

@import '~bootstrap/scss/bootstrap';
@import '~bootstrap/scss/_mixins';
@import '~bootstrap-vue/src/index.scss';

body {
    background-color: $grey-0;
    font-family: "Roboto", sans-serif;
}

.navbar {
    background-color: $grey-2;
}

.navbar-brand {
    font-family: "Poppins", sans-serif;
    font-size: 1.4em;
    color: $grey-11 !important;
}

.nav-link {
    color: $grey-9 !important;
}

// Apply
.card {
    color: $grey-9;
    background-color: $grey-2;
    border-bottom: 1px solid $grey-1;
    border-radius: 0;
}

.quote-list > tr {
    white-space: nowrap;

    &:hover {
        background-color: $grey-4;
    }

    &.highlight {
        background-color: $grey-5 !important;
    }
}

.quote-text {
    white-space: normal;
}

.quote-speaker {
    color: darken($grey-10, 1.75%);
    min-width: 100px;
    padding-right: 1em;
    font-weight: 600;
    vertical-align: text-top;
    text-align: right;
    font-family: "Montserrat", sans-serif;
}

table.quote-list tr td:last-child {
    height: 100%;

    a {
        height: 100%;
    }

    svg {
        font-size: 1.35em;
        opacity: 0;
        transition: opacity 0.1s ease-in;
    }
}

table.quote-list tr:hover td:last-child svg {
    opacity: 1;
}

// Make all season cards 'clickable'
.season-item > .card-body > .card-header {
    cursor: pointer;
}

// Make all chevron icons rotate 180 when clicked
.bi-chevron-down {
    -moz-transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

.not-collapsed > .bi-chevron-down {
    transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}

// White popovers use white background on top left/right corners, this disables it.
.b-popover {
    background: transparent;
    border-color: $grey-1 !important;
}

// Dark theme popover
.popover-header {
    background-color: darken($grey-2, 2.1%) !important;
    border-color: $grey-1 !important;
    color: $grey-11 !important;
}

// Dark theme popover, arrow-right fix
.bs-popover-top > .arrow::after,
.bs-popover-auto[x-placement^="top"] > .arrow::after {
    border-color: darken($grey-3, 2%) !important;
}

.bs-popover-bottom > .arrow::after,
.bs-popover-auto[x-placement^="bottom"] > .arrow::after {
    border-bottom-color: darken($grey-3, 2%) !important;
}

.bs-popover-left > .arrow::after,
.bs-popover-auto[x-placement^="left"] > .arrow::after {
    border-color: darken($grey-3, 2%) !important;
}

.bs-popover-right > .arrow::after,
.bs-popover-auto[x-placement^="right"] > .arrow::after {
    border-right-color: darken($grey-3, 2%) !important;
}

.season-item .list-group-item {
    background-color: $grey-3;
    &:first-child {
        border-radius: 0;
    }
    &:hover {
        background-color: lighten($grey-3, 2.5%);
    }
}

// Dark theme popover body
.popover-body {
    color: $grey-8 !important;
    background-color: darken($grey-3, 2%) !important;
}

.season-title {
    color: $grey-8;
    cursor: pointer;
}

// Season Card Background Color
.season-item {
    .card-body {
        padding: 0;
    }

    .card-header {
        background-color: darken($grey-2, 1.5%);
        color: $grey-9;
        border-bottom: 1px solid $grey-0 !important;
        font-family: "Montserrat", sans-serif;
    }
}

.episode-item {
    border-color: $grey-2;
    background-color: darken($grey-3, 2%);
    color: $grey-8 !important;
    border-left-width: 0;
    border-right-width: 0;

    &:hover,
    &:active,
    &:focus {
        background-color: darken($grey-1, 0.75%);
    }
}

.no-link {
    color: inherit;
    text-decoration: none;

    &:hover {
        color: inherit;
        text-decoration: none;
    }
}

.btn {
    box-shadow: none;

    &:focus {
        box-shadow: none;
    }
}

.character-button {
    color: $grey-10;
    background-color: $grey-4;
    border-color: $grey-3;

    .badge {
        color: lighten($grey-11, 8%);
    }
}

.character-button {
    &:focus {
        background-color: $grey-6 !important;
        border-color: $grey-4 !important;

        &:active {
            box-shadow: none !important;
        }
    }

    &:hover {
        background-color: $grey-4 !important;
        border-color: $grey-3 !important;
    }

    &:active {
        background-color: $grey-3 !important;
        border-color: $grey-3 !important;
    }
}

.character-button > .badge {
    background-color: $grey-7;
}

/*.btn-dark {*/
/*    &:not(:disabled), &:not {*/
/*        */
/*    }*/
/*}*/

/*.btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active, {*/
/*    color: #ffffff;*/
/*    background-color: #1d2124;*/
/*    border-color: #171a1d;*/
/*}*/

.card-footer {
    padding: 0.1em;
    font-size: 0.8em;
    color: grey;
}

mark,
.mark {
    padding: 0.02em;
    background-color: $highlight;
    /*color: #black;*/
    /*-webkit-filter: invert(100%);*/
    /*filter: invert(100%);*/
}

//.ais-Hits-item,
//.ais-InfiniteHits-item,
//.ais-InfiniteResults-item,
//.ais-Results-item {
//    /*margin-top: 1rem;*/
//    /*margin-left: 1rem;*/
//    /*padding: 1rem;*/
//    /*width: calc(25% - 1rem);*/
//    border: none;
//    box-shadow: none;
//}

.card-body h4,
.breadcrumb-item.active {
    text-transform: capitalize;
}

.skeleton {
    min-height: 24px;
}
a {
    color: #1296ff;
    &:hover {
        color: #007fe0;
    }
}

.breadcrumb-item + .breadcrumb-item::before {
    color: $grey-10;
}

.breadcrumb {
    background-color: $grey-3;
    border-radius: 0;

    .breadcrumb-item {
        color: $grey-10;
    }
}
