the-office/app/scss/main.scss

// @use "sass:color";
// @use "@/scss/_variables.scss" as theme;

// @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/_mixins';

// // Apply

// 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: theme.$gray-100 !important;
// }

// // Dark theme popover
// .popover-header {
//     background-color: color.adjust(theme.$gray-200, $lightness: -2.1%);
//   border-color: theme.$gray-100;
//   color: theme.$gray-100;
// }

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

// .bs-popover-bottom > .arrow::after,
// .bs-popover-auto[x-placement^="bottom"] > .arrow::after {
//   border-bottom-color: color.adjust(theme.$gray-300, $lightness: -2%) !important;
// }

// .bs-popover-left > .arrow::after,
// .bs-popover-auto[x-placement^="left"] > .arrow::after {
//   border-left-color: color.adjust(theme.$gray-300, $lightness: -2%);
// }

// .bs-popover-right > .arrow::after,
// .bs-popover-auto[x-placement^="right"] > .arrow::after {
//   border-right-color: color.adjust(theme.$gray-300, $lightness: -2%) !important;
// }

// .season-item .list-group-item {
//   background-color: theme.$gray-300;

//   &:first-child {
//     border-radius: 0;
//   }

//   &:hover {
//     background-color: color.adjust(theme.$gray-300, $lightness: 2.5%);
//   }
// }

// // Dark theme popover body
// .popover-body {
//   color: theme.$gray-800 !important;
//   background-color: color.adjust(theme.$gray-300, $lightness: -2%) !important;
// }

// .season-title {
//   color: theme.$gray-800;
//   cursor: pointer;
// }

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

//   .card-header {
//     background-color: color.adjust(theme.$gray-200, $lightness: -1.5%);
//     color: theme.$gray-900;
//     border-bottom: 1px solid theme.$gray-000 !important;
//     font-family: "Montserrat", sans-serif;
//   }
// }

// .episode-item {
//   border-color: theme.$gray-200;
//   background-color: color.adjust(theme.$gray-300, $lightness: -2%);
//   color: theme.$gray-800 !important;
//   border-left-width: 0;
//   border-right-width: 0;

//   &:hover,
//   &:active,
//   &:focus {
//     background-color: color.adjust(theme.$gray-100, $lightness: -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: theme.$gray-1000;
//   background-color: theme.$gray-400;
//   border-color: theme.$gray-300;

//   .badge {
//     color: color.adjust(theme.$gray-100, $lightness: 8%);
//   }
// }

// .character-button {
//   &:focus {
//     background-color: theme.$gray-600 !important;
//     border-color: theme.$gray-400 !important;

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

//   &:hover {
//     background-color: theme.$gray-400 !important;
//     border-color: theme.$gray-300 !important;
//   }

//   &:active {
//     background-color: theme.$gray-300 !important;
//     border-color: theme.$gray-300 !important;
//   }
// }

// .character-button > .badge {
//   background-color: theme.$gray-700;
// }

// /*.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: theme.$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: theme.$gray-1000;
// }

// .breadcrumb {
//   background-color: theme.$gray-300;
//   border-radius: 0;

//   .breadcrumb-item {
//     color: theme.$gray-1000;
//   }
// }

// .list-group {
//   .list-group-item {
//     background-color: theme.$gray-200;
//   }
// }

// hr {
//   border-top-color: theme.$gray-600;
// }