@import "theme/theme.less";
@import "colors.less";
@import "homepage.less";
@import "listens-page.less";
@import "pinned-recordings.less";
@import "playlists.less";
@import "timeline.less";
@import "follow.less";
@import "recommendation-page.less";
@import "DatePicker.less";
@import "music-services.less";
@import "cbreviewmodal.less";
@import "huesound.less";
@import "year-in-music.less";
@import "brainzplayer.less";
@import "messybrainz.less";
@import "metadata-viewer.less";
@import "musicbrainz-entity-icons.less";
@import "personal-recommendation-modal.less";
@import "pill.less";
@import "preferences.less";
@import "fresh-releases.less";
@import "rc-slider.less";
@import "add-listen-modal.less";
@import "import-playlist-modal.less";
@import "DateTimePicker.less";
@import "TimePicker.less";
@import "explore.less";
@import "search-track.less";
@import "stats.less";
@import "switch.less";
@import "sidebar.less";
@import "new-navbar.less";
@import "tags.less";
@import "music-neighborhood.less";
@import "stats-art-creator.less";
@import "entity-pages.less";
@import "release-card.less";
@import "search.less";
@import "accordion.less";
@import "donors-page.less";
@import "donations.less";
@import "scroll-container.less";
@import "flairs.less";

@icon-font-path: "/static/fonts/";

@pager-border-radius: @border-radius-base;

@import (inline) "react-toastify/dist/ReactToastify.css";

@import (inline, css) "highlight.js/styles/github.css";

pre code.hljs {
  max-height: 50vh;
  overflow-y: auto;
}

.table {
  > thead > tr > th {
    border-bottom-width: 1px;
  }
}

.table-nonfluid {
  width: auto !important;
}

.btn {
  .glyphicon {
    margin-right: 4px;
  }
  &.dropdown-toggle {
    border-radius: 4px;
  }
}

// Navbar
@grid-float-breakpoint: @screen-md-min; // Point at which the navbar becomes uncollapsed

.navbar {
  .nav {
    > li {
      > a {
        color: @blue;
      }
    }
  }

  .beta {
    .pull-right;
    color: @red;
  }

  @logo-width: 165px + 15px;
  .navbar-variant(#353070, @logo-width);

  .import-link {
    > a {
      color: white !important;
      font-size: 1.5em !important;
      background-color: @orange !important;

      &:hover,
      &:focus {
        background-color: darken(@orange, 6.5%) !important;
      }
    }
  }

  .navbar-form {
    padding-right: 0px;

    .btn {
      background-color: @orange;
      margin-right: 0px;
    }
  }
}

// Content Wrapper
.container-react-main {
  min-height: 70vh;
  .container-fixed();
}

/* Footer */
.footer {
  padding-left: 25px;
  width: 100%;
  background: #fff;
  color: #000000;
  padding-bottom: 10px;
  margin-top: 2rem;
  margin-left: ceil((@grid-gutter-width / -2));
  margin-right: floor((@grid-gutter-width / -2));
  border-top-width: 2px;
  border-top-style: solid;
  border-top-color: #ddd;

  ul {
    line-height: 2;
  }

  li {
    vertical-align: middle;
  }
}

.center-p {
  color: var(--color);
  text-align: center;
  padding-top: 20px;
}

.section-line {
  padding-top: 30px;
  border-top: 1px solid @gray-light;
}

.text-brand {
  font-size: 2rem;
  font-weight: 600;
}

@media (max-width: 767px) {
  .text-brand {
    font-size: 1.8rem;
  }
}

.color-purple {
  color: #353070;
}

.color-orange {
  color: #e9733d;
}

.color-gray {
  text-decoration: none;
  color: #000000;
}

.mt-5 {
  margin-top: 5px;
}

.mt-10 {
  margin-top: 10px;
}

.mt-15 {
  margin-top: 15px;
}

.mb-5 {
  margin-bottom: 5px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-15 {
  margin-bottom: 15px;
}

.flex {
  display: flex;

  > * {
    flex: 1;
  }
}

.flex-center,
.vertical-align {
  display: flex;
  align-items: center;
}

.flex-center {
  justify-content: center;
}

.flex-wrap {
  flex-wrap: wrap;
}

// Allows styling of elements other than <a> in Bootstrap dropdowns
.dropdown-menu > li {
  max-width: 300px;
  > * {
    &:extend(.dropdown-menu > li > a all);
    background: inherit;
    border: none;
    width: 100%;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.full-page-loader {
  position: fixed;
  background: #000000a6;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 10;
}

.similarity-score {
  &.regular {
    .progress {
      height: 15px;
      width: 300px;
    }
  }

  &.compact {
    > * {
      display: inline-block;
      margin-bottom: 0px;
    }

    .progress {
      height: 7px;
      width: 80px;
      margin-right: 5px;
    }
  }

  .progress {
    box-shadow: none;
    border-radius: 16px;
    background-color: #fafafa;
  }

  .progress-bar {
    border-radius: 16px;

    &.red {
      background-color: @red;
    }

    &.orange {
      background-color: @orange;
    }

    &.purple {
      background-color: @blue;
    }
  }
}

.sticky-top {
  position: -webkit-sticky;
  position: sticky;
  top: 20px;
}

#feedback-button {
  .icon {
    > :not(:first-child) {
      color: @orange;
    }

    margin-right: 0.7em;
  }
}

// For cover art in alerts
@alertThumbnailSize: 60px;

.brainzplayer-alert {
  display: flex;
  align-items: center;
  justify-content: center;
}

.alert-thumbnail {
  max-height: @alertThumbnailSize;
  margin: -@alert-padding;
  margin-right: @alert-padding;
}

.search-dropdown {
  display: block;
  position: absolute;
  right: 0;
  max-width: 100%;
  z-index: 6;
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.175);
  list-style: none;
  border: 1px solid @gray-light; // IE8 fallback
  border: 1px solid rgba(0, 0, 0, 0.15);
  background-color: @white-background;
  max-height: 102px;
  /*overflow: hidden;*/
  overflow-y: auto;

  // Links within the dropdown menu
  > a,
  > button {
    display: block; // necessary for <a> tags
    width: 100%;
    background: none;
    color: inherit;
    border: none;
    padding: 5px 20px;
    font: inherit;
    cursor: pointer;
    outline: inherit;
    text-align: left;

    &:hover {
      color: @white-background;
      background-color: @orange;
    }
  }
}

.badge-info {
  color: @white;
  background-color: @blue;
}

// Fix button height inside an input group
.input-group:not(.input-group-lg):not(.input-group-sm)
  > .input-group-btn
  > .btn {
  line-height: 2em;
}

.btn-icon {
  padding: 0.5em;
  font-size: 1.5em;
  height: 2em;
  line-height: 1em;
  border-radius: 5px;
  text-align: center;
  display: inline-block;

  & + * {
    margin-left: 0.4em;
  }

  > svg {
    /* We might forget to set the fixedWidth attribute on FontAwesome icons
    but we do want to make sure all icons have the same width, so extend the FA class */
    &:extend(.fa-fw);
  }
}

.btn-rounded {
  border-radius: 3em;
}

.Importer {
  border: 2px solid #a0a0a0;
  padding: 1rem;
  border-radius: 5px;
}

#export-buttons {
  details[open] > summary > svg {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}

.atom-button {
  width: 1.4em;
  height: 1.4em;
  aspect-ratio: 1;
  padding: 0.25em;
  margin: 0;
  margin-left: 5px;
}
