/* #SCSS> */
$fa-font-path: "../../bootstrap3/css/fonts";
// Load bootstrap via include path to silence deprecation warnings
// (see vendor subdirectory for the actual contents)
@import "bootstrap/bootstrap";
/* <#SCSS */
/* #LESS>
@import "vendor/bootstrap/bootstrap";

<#LESS */
@import "variables";
// Import custom (non-vendor) mixins
@import "mixins/mixins";

/* #SCSS> */
$fa-font-path: "../../bootstrap3/css/fonts";
// Load font-awesome via include path to silence deprecation warnings
// (see vendor subdirectory for the actual contents)
@import "font-awesome/font-awesome";
/* <#SCSS */
/* #LESS>
@import "vendor/font-awesome/font-awesome";
<#LESS */

@import "../vendor/bootstrap-accessibility/bootstrap-accessibility";
@import "../vendor/a11y";

@import "components/accessibility";
@import "components/variables";

@import "components/advanced-search";
@import "components/alphabrowse";
@import "components/autocomplete";
@import "components/channels";
@import "components/cookie-consent/index";
@import "components/devtools";
@import "components/explain";
@import "components/form";
@import "components/icons";
@import "components/keyboard";
@import "components/lightbox";
@import "components/offcanvas";
@import "components/record";
@import "components/search";
@import "components/sidebar";
@import "components/similar-carousel";
@import "components/sliders";
@import "components/trees";

/**
 * Notes
 * = As of 4.0, code styles aren't enforced, but
 *   preferred styles are outlined here: http://codeguide.co/#css
 *
 * = The preferred method for writing code is to put generic and mobile styles first
 *   and surround desktop styling with media min-width queries.
 *
 * = Bootstrap 3 breakpoints: <768px, >=768px, >=992px, >=1200px
 *                                xs,      sm,      md,       lg
 * = Breakpoint of <=530px also used to target phones specifically
 */

html { font-size: 14px; } // Root font size from Bootstrap, allows consistent use of rem units
a,
label { cursor: pointer; }
.alert.alert-info a { text-decoration: underline; }
.alert-default {
    border-color: $well-border;
    background-color: $well-bg;
}

// Improve contrast
.btn.disabled:active,
.btn.disabled:focus,
.btn.disabled:hover { color: #000; }
.list-unstyled { margin: 0; }
.icon-bar { background-color: #888; }

// Icons vs. Underline fix
.btn {
  text-decoration: none;
}
.btn-link {
  @extend .icon-link;

  &.pull-left,
  &.pull-right {
    display: flex;
  }
}
.nav > li > a {
  @extend .icon-link;
  text-decoration: none;

  &:hover,
  &:focus {
    /* borrowed from a11y accessibility */
    color: $dropdown-bg;
    text-decoration: none;
    background-color: #333;
    outline: dotted 1px #000;
  }
}
.nav .dropdown-toggle {
  padding-right: 8px;

  .icon {
    margin-left: 4px;
    margin-right: 0;
  }

  body.rtl & {
    padding-left: 8px;
    padding-right: 10px;

    .icon {
      margin-left: 0;
      margin-right: 4px;
    }
  }
}
.navbar-nav button.dropdown-toggle {
  @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
  appearance: none;
  padding: $navbar-padding-vertical;
  border: 0;
  color: inherit;
  background-color: transparent;
}

// Normalize highlighting
.highlight,
mark {
  background: lighten(#FF0, 20%);
  padding: .1em .2em;
}

// Normalize
img { max-width: 100%; }

// Bootstrap overrides
.breadcrumb {
  margin-top: .5rem;
  margin-bottom: .5rem;
}
.label { display: inline-block; }
.popover { width: 250px; }
.resulthead { @include clearfix(); }
.sub-breadcrumb {
  padding: 5px 10px;
  white-space: nowrap;
  li {display: inline-block;}
  li + li:before {
    padding-left: 5px;
    padding-right: 5px;
    color: $breadcrumb-color;
    content: "#{$breadcrumb-separator}\00a0";
  }
}
.tab-content { padding: 4px; }

h2 { font-size: 20px; }
h3 { font-size: 16px; }
@media (min-width: 768px) {
  h2 {
    font-size: 23px;
    font-weight: normal;
  }
  h3 {
    font-size: 20px;
    font-weight: normal;
  }
  .form-control { max-width: 400px; }
  #modal .form-control { max-width: none; }
}

/* ------ Layout ------ */
.sticky {
  position: fixed;
  left: 0;
}

.sticky {
  .sticky-hidden {
    display: none !important;
  }
}

footer {
  @extend .container;
  padding: 1rem;
}
@media (min-width: 768px) {
  .footer-container {
    display: flex;
    width: 100%;
  }
  .footer-column { flex: 0 1 100%; }

  // Main content and sidebar widths and float
  .mainbody { width: 75%; }
  .sidebar { width: 25%; }
  .mainbody.left,
  .sidebar.left {
    float: left;
    padding-right: 1rem;
  }
  .mainbody.right,
  .sidebar.right {
    float: right;
    padding-left: 1rem;
  }
  .mainbody.solo {
    width: auto;
    padding-left: 0;
    padding-right: 0;
  }
}
.flex { display: flex; }
.rtl .flex { flex-direction: row-reverse; }
.flex-col { flex: 0 1 100%; }
.flex-none { flex: none; }

/* ------ Form Errors ------ */
.has-error {margin-bottom: 0;}
.sms-error { @extend .has-error; }
.help-block.with-errors {
  margin: 0;
  &:first-child {
    padding-top: $padding-base-vertical;
  }
  padding-bottom: $padding-base-vertical;
  &:empty {padding: 0;}

  ul.list-unstyled {
    margin: 0;
  }
}

/* ------ Admin ------ */
.form-admin-maintenance .form-control {
  display: inline-block;
  width: 100px;
}

/* ------ Badges - blend the links in ------ */
.badge a { color: #fff; }

/* ------ Browse ------ */
// Layout
@media (min-width: 768px) {
  .browse-container { display: flex; }
  .browse-list {
    flex-basis: 25%;
    padding-right: 1rem;
  }
  .browse-list:last-child { padding-right: 0; }
}
// List item styling
.browse-item {
  position: relative;
  display: block;
  padding: .5rem 1rem;
  border: 1px solid $list-group-border;
  border-bottom: 0;
  word-wrap: break-word;
}
.browse-item.active {
  background-color: $brand-primary;
  color: #fff;

  .badge {
    background-color: #fff;
    color: $gray-darker;
  }
}
.browse-item:hover { background-color: $nav-link-hover-bg; }
.browse-item:last-child { border-bottom: 1px solid $list-group-border; }

.browse-item.with-badge {
  padding-right: 3rem; // Prevent text from overlapping badge
  .badge {
    position: absolute;
    top: .5rem;
    right: .25rem;
  }

  body.rtl & {
    padding-left: 3rem;
    padding-right: 1rem;
    .badge {
      left: .25rem;
      right: auto;
    }
  }
}
.browse-item.view-record {
  padding: 2px 4px;
  font-size: 85%;
  text-align: right;
  border-top: 0;
}

/* ------ Cart ------ */
.cart-controls,
.cart-control-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}
.cart-controls > .checkbox {
  margin-top: 0.5rem;
  /* wrap below */
  order: 1;
  flex-basis: 100%;
}
.cart-control-btns {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cart-controls .toolbar-btn {
  @extend .toolbar-btn;
  @extend .icon-link;

  margin: 0;
}

@media (min-width: 992px) {
  .cart-controls > .checkbox {
    margin-block: 0;
    padding-inline-end: 1rem;
    padding-bottom: 0.25rem;
    /* place inline */
    order: unset;
    flex-basis: auto;
  }
}

.nav .btn-bookbag-toggle { float: left; }
.nav .btn-bookbag-toggle a {
  display: block;
  padding: $nav-link-padding;
  text-decoration: none;
  &:hover,
  &:focus {
    @include outline(1px);
    text-decoration: none;
    background-color: $nav-link-hover-bg;
  }
}

/* ------ Devtools ------ */
.translation-output {
  width: 100%;
  max-width: none;
  font-family: $font-family-monospace;
  font-size: 12px;
  white-space: pre;
}

/* ------ MyResearch ------ */
.form-login .btn-link ~ .btn-link { padding-left: 0; } // Login link spacing
.myresearch-menu {
  ul {
    list-style: none;
    margin-bottom: $myresearch-menu-ul-margin-bottom;
    padding-left: $myresearch-menu-ul-padding-left;
  }
  a {
    display: inline-flex;
    gap: 0.375rem;
    width: 100%;
    padding: 10px 15px;
    line-height: 1.15;
    align-items: baseline;

    &:hover {
      background-color: $gray-lighter;
      outline: dotted 1px #000;
    }
    &:focus {
      background-color: $nav-link-hover-bg;
    }
    &.user-list-link i {
      margin-left: 0.5rem;
    }
    &.active {
      background-color: $brand-primary;
      color: #fff;
    }

    .icon-link__icon {
      width: 1rem;
      text-align: center;
    }

    .icon-link__label {
      flex: 1 1 0%;
    }
  }

  .status {
    display: flex;
    gap: 2px;
    flex: none;
    .badge {
      border-radius: 2px;
      border: 1px solid; /* color inherited from bootstrap */
      height: 20px;

      &.account-none {
        color: $gray-dark;
        background-color: $gray-lighter;
      }
      &.account-info {
        color: $state-success-text;
        background-color: $state-success-bg;
      }
      &.account-warning {
        color: $state-warning-text;
        background-color: $state-warning-bg;
      }
      &.account-alert {
        color: $state-danger-text;
        background-color: $state-danger-bg;
      }
    }
  }

  .active .status .badge {
    color: #fff;
    background-color: transparent;
    border: 1px solid #fff;
  }
}

ul.list-group {
  list-style: none;
}

.dropdown-menu > li .dropdown-header {
  min-width: 200px;
}

.logoutOptions.with-dropdown a { padding-right: .5rem; }
#login-dropdown {
  a {
    margin-right: .5rem;
  }

  .dropdown-menu {
    width: 250px;
    padding: 0 0.5rem 0.5rem 0.5rem;

    .account-menu {
      display: block;
    }

    h3 {
      margin-left: 0.5rem;
    }
  }
}
#login-dropdown
#login-dropdown .dropdown-menu .account-menu { display: block; }
.login-tokens-table {
  margin-bottom: 0.5rem;
  tbody > tr > td {
    vertical-align: middle;
  }
}

/* --- PubDateVis --- */
.list-edit-container { @include clearfix(); }

/* ------ PubDateVis ------ */
#dateVisColorSettings {
  background-color: #fff; // background of box
  fill: #eee;             // fillColor
  outline-color: #c38835; // selection color
  stroke: $brand-primary; // color
}

/* ------ Table wrapping to prevent horizontal overflow ------ */
.table {
  th {
    word-wrap: break-word;
  }
  &.staff-view th {
    min-width: 30%;
    word-wrap: anywhere;
  }
  td {
    word-wrap: anywhere;
  }
  td.fullAvailability, td.holdings-table {
    word-wrap: break-word;
  }
}
.callnumAndLocation .table, .table.holdings-table {
  td {
    word-wrap: break-word;
  }
}
// No wrapping for fines table in wide windows
@media (min-width: 992px) {
  .table.fines-table {
    td, th {
      word-wrap: normal;
    }
  }
}

/* ------ Responsive table for small screen size ------ */
@media screen and (max-width: 768px) {
  .table-responsive {
    border: none;
    thead, tfoot > tr > th {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      border: 0;
    }
    tbody > tr {
      display: block;
      margin-bottom: $line-height-computed;
      border-left: 1px solid $table-border-color;
      border-right: 1px solid $table-border-color;
      border-bottom: 4px solid $table-border-color;
    }
    td, tbody > tr > th {
      display: flex;
      align-items: first baseline;
      background: #fff;
      &:before {
        display: flex;
        flex-basis: 40%;
        flex-shrink: 0;
        font-weight: bold;
        content: attr(data-label);
      }
    }
    tbody > tr > td:nth-child(even) {
      background-color: $table-bg-accent;
    }
    tfoot > tr > td {
      border-top: none;
    }
  }
}

/* ------ Visualization View ------ */
.node {
  position: absolute;
  box-sizing: content-box;
  margin: -1px;
  overflow: hidden;
  font: 10px sans-serif;
  line-height: 12px;
  border: 1px solid #fff;
}
.node div {margin-top: 0px;}
.toplevel {border: 2px solid #000;}
.node .label {
  position: absolute;
  bottom: 0;
  left: 0;
  min-height: 1px;
  padding: 2px 4px;
  font-size: 85%;
  background-color: rgba(0,0,0,.5);
  border-radius: 0;
  text-shadow: none;
}
.notalabel {color: #000;}
#viz-instructions {padding-top: 600px;}

span[class^="services-"],
span[class*=" services-"] span::before { content: ", "; }
span[class^="services-"],
span[class*=" services-"] span:first-of-type::before { content: ""; }

/* --- extended holdings --- */

div.holding-details {
    display: flex;

    .holding-field {
        flex: 1 1 0;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .holding-field.barcode,
    .holding-field.place-hold,
    .holding-field.storage-retrieval,
    .holding-field.ill-request,
    .holding-field.recall {
        flex: 1 1 0;
    }

    .holding-field.availability{
        flex: 2 1 0;
    }

    .due-date:before {
        content: "\2013";
        padding-right: 0.3em;
    }

    .due-date {
        white-space: nowrap;
    }
}

div.holding-notes {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.odbrand {
  padding: 7px;
}

.od_download {
    width: 100%;
    border-width: 0px;
    height: 450px;
}

.oauth2-prompt {
  ul {
    margin-top: 1rem;
  }
  .oauth2-ils-selection {
    margin-top: 1rem;
    margin-bottom: 1rem;

    form {
      margin-top: 1rem;
    }
  }
}

/* --- Cookie Consent --- */
.show--preferences #cc-main .cc--anim .pm-overlay {
  opacity: $modal-backdrop-opacity;
}

#cc-main {
  a {
    &:hover {
      color: $link-hover-color;
      text-decoration: $link-hover-decoration;
      background-size: 0%;
    }
  }

  .cc--anim .cm__close,
  .cc--anim .cm__btn,
  .pm__btn {
    transition: none;
  }
  .cm--bar .cm__btn, .pm__btn {
    font-size: 14px;
  }
  .cm--bar .cm__btn {
    flex: none;
  }

  .pm__section--expandable .pm__section-arrow {
    background: none;
  }

  .pm__section--toggle {
    background: transparent;
  }
}

/* --- Help menu --- */
.HelpMenu {
  list-style-type: none;
  margin-bottom: 1rem;
  padding: 0;
}

/* --- Pagination --- */
.pagination {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  justify-content: center;
}