/* 
 * Copyright 2011-2025, The Trustees of Indiana University and Northwestern
 *   University.  Licensed under the Apache License, Version 2.0 (the "License");
 *   you may not use this file except in compliance with the License.
 *
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed
 *   under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
 *   CONDITIONS OF ANY KIND, either express or implied. See the License for the
 *   specific language governing permissions and limitations under the License.
 * ---  END LICENSE_HEADER BLOCK  ---
*/

[class*="ramp--"] {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
}

.ramp--all-components {
  .ramp--structured-nav.display>.ramp--structured-nav__sections {
    align-items: center;
  }

  .ramp--media_player {
    .video-js .vjs-big-play-button {
      left: 55% !important;
    }
    @media (max-width: 585px) {
      .video-js .vjs-big-play-button {
        scale: 1.5;
      }

      .video-js .vjs-control-bar {
        font-size: 90% !important;
      }

      // reduce player height to match with adjusted font-size
      // for smaller screens
      .video-js.vjs-audio {
        min-height: 2.9em;
      }
    }
  }

  .ramp--structured-nav {
    max-width: initial;
  }

  .ramp--rails-title {
    font-size: 2rem !important;
    margin-top: 1rem !important;

    h2 {
      font-family: Arial, Helvetica, sans-serif;
    }
  }

  .ramp--rails-content {
    margin: 14px 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    #shareBtn {
      i {
        margin-right: 0.2rem;
        color: #2a5459;
      }
    }

    .ramp-button-group-1 {
      display: flex;
      justify-content: flex-start;
      padding: 0;
    }

    .accessibility-request {
      padding: 0;
      // Align text to left when wrapped to a new line in smaller screens
      @media (max-width: 575px) {
        &:not(.col-8) {
          text-align: left !important;
        }
      }
      span {
        vertical-align: -moz-middle-with-baseline;
        vertical-align: -webkit-baseline-middle;
      }
    }
  }

  .ramp--supplemental-files {
    .ramp--supplemental-files-display-content {
      padding-left: 0;
      max-height: inherit;
    }

    h4 {
      border-bottom: 0.1rem solid #ddd;
      padding-bottom: 0.75rem;
      font-size: 1.25rem;
    }
  }

  .ramp--structured-nav__list.expanded {
    display: block;
  }

  .ramp--structured-nav__list.closed {
    display: none;
  }

  .expand-collapse-toggle-button.expanded>svg {
    transform: rotate(-180deg);
    transition: transform 0.35s ease;
  }

  .expand-collapse-toggle-button.closed>svg {
    transform: rotate(0deg);
    transition: transform 0.35s ease;
  }

  #shareList {
    margin-top: 0.5rem;
  }

  .nav.nav-tabs {
    background-color: #fff;
    border: 1px solid #e2e7e9;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

    a.nav-link {
      padding: 1em;
    }
    li.nav-item {
      border-bottom: none;
    }
    .nav-item {
      border: none;
      background-color: transparent;
      border-bottom: 1px solid #e2e7e9;
      color: #243142;
      cursor: pointer;
      -ms-flex-positive: 1;
      flex-grow: 1;
      line-height: 1;
      position: relative;
      z-index: 100;

      button {
        border: none;
        width: 100%;
        height: 100%;
        padding: 1rem;
        border-radius: 0;
      }
    }
    .nav-item:not(:first-child) {
      border-left: 1px solid #e2e7e9;
      margin-left: -1px;
      border-radius: 0;
    }
    .nav-link:hover {
      background-color: #f8f9fa;
      color: #0e1825;
    }
    .nav-link:hover:after {
      background-color: #e2e7e9;
      bottom: 0;
      content: "";
      display: block;
      height: 0.25rem;
      left: 0;
      position: absolute;
      width: 100%;
    }
    .nav-link:focus {
      outline: .125rem solid #80a590;
      outline-offset: 0.125rem;
      background-color: rgba(128, 165, 144, .3);
    }
    .nav-link:focus:not(:focus-visible) {
      outline: none;
    }
    .nav-link[aria-selected=true] {
      background-color: #f8f9fa;
    }
    .nav-link[aria-selected=true]:after {
      bottom: -1px;
      background-color: #2a5459;
      content: "";
      display: block;
      height: 0.25rem;
      left: 0;
      position: absolute;
      width: 100%;
    }
  }

  .ramp--tabs-panel {
    display: flex;
    flex-direction: column;
    flex-basis: auto;

    .tab-content {
      display: flex;
      flex-grow: 1;
      height: 70vh;
    }

    .tab-pane {
      flex-grow: 1;
      padding: 1rem;
      border-bottom-left-radius: 0.25rem;
      border-bottom-right-radius: 0.25rem;
      overflow: auto;
    }
  }

  .iiif-manifest-logo {
    width: 1.5em;
  }

  @media (max-width: 585px) {
    .ramp--tabs-panel {
      padding-top: 1rem;
    }
  }

  // Remove double scroll-bar for transcripts tab
  .ramp--transcripts_tab {
    overflow: hidden;
  }

  .tab-pane:focus {
    outline: 0.125rem solid #006298;
    outline-offset: -0.125rem;
  }
  .tab-pane:focus:not(:focus-visible) {
    outline: none;
  }

  /* Override Ramp styling */
  .ramp--metadata-display {
    min-width: fit-content !important;

    .ramp--metadata-display-content {
      padding: 0;
      max-height: 100%;
    }
  }

  .ramp--transcript_nav {
    max-height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
  }

  .ramp--transcript_nav div.transcript_content {
    height: fit-content;
  }

  .vjs-track-scrubber-container {
    width: 100%;

    .vjs-time {
      margin: 0 !important;
    }

    .tooltiptext {
      bottom: 3em;
    }
  }
}

// Left align the structure navigation component in item view
.ramp--all-components.ramp--itemview {
  .ramp--structured-nav>.ramp--structured-nav__list,
  .ramp--structured-nav>.ramp--structured-nav__list>.ramp--structured-nav__list-item {
    padding: 0;
  }
}

#add_to_playlist_alert {
  a {
    font-weight: bold;
    text-decoration: underline;
  }

  p {
    margin: 0;
  }
}

.ramp--all-components.ramp--playlist {
  .ramp--structured-nav {
    margin-top: 0px;
    min-width: inherit;
    max-height: 100%;
    overflow: hidden;
  }

  .tab-pane {
    border-top-right-radius: 0.25rem;
  }

  .fa {
    padding-right: 0.25rem;
  }

  .ramp--auto-advance {
    height: fit-content;
    max-height: 34.5px;
    align-items: center;

    .slider {
      height: 30px;
      width: 55px;
    }
    .ramp--auto-advance-label {
      font-weight: bold;
      padding: 0px;
    }
  }

  .ramp--playlist-accordion {
    // Set accordion with to fit player's minimum width
    min-width: 490px;
    &.mobile-view {
      min-width: 380px;
    }

    border-radius: 0 0 0.25em 0.25em;
    border-top: none;

    .accordion-header {
      font-family: inherit;
      button svg {
        margin-right: 0.25em;
      }
    }

    .accordion-button::after {
      background-image: unset !important;
    }

    .accordion-button svg.accordion-arrow {
      transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -webkit-transition: all 0.3s ease;
      transform: rotate(270deg);
      -o-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
      -webkit-transform: rotate(270deg);
    }

    .accordion-button[aria-expanded="true"] .accordion-arrow {
      transform: rotate(360deg);
      -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -webkit-transform: rotate(360deg);
    }

    .ramp--markers-display__markers-empty {
      font-size: inherit;
    }
  }

  .ramp--playlist-items-column {
    display: flex;
    flex-direction: column;
    flex-basis: auto;
    height: 70vh;

    .ramp--playlist-desc-tags {
      flex-direction: column;
    }

    .ramp--playlist-description {
      overflow: auto;
      max-height: 25vh;
    }

    // Scroll to see more message
    .ramp--playlist-description-scroll {
      display: none;
    }

    .ramp--playlist-description-scroll.scrollable {
      background: #bbbbbb;
      text-align: center;
      display: block;
      position: absolute;
      color: black;
      font-size: 13px;
      width: fit-content;
      bottom: 0;
      left: 35.5%;
      border: 1px solid #ddd;
      border-radius: 0.25rem 0.25rem 0 0;
      border-bottom: none;
      padding: 0.25em;
      transform: translateY(-1.5rem);

      @media (min-width: 585px) and (max-width: 768px) {
        left: 25%;
      }
    }

    .ramp--structured-nav__border {
      margin-top: 0;
      overflow: auto;
      max-height: inherit;
    }

    .ramp--structured-nav__content.playlist-items:focus,
    .ramp--structured-nav__border:focus {
      outline: 0.125rem solid #2a5459;
      outline-offset: -0.125rem;
    }
  }

  /* CSS for playlist items column height in landscape mode for mobile devices */
  @media(orientation: landscape) {
    .ramp--playlist-items-column.mobile-view {
      height: 109vh !important;
    }
  }
}

.ramp--playlist-accordion-header {
  padding: 0;
  width: 100%;
  text-align: left;
  text-decoration: none;
  &:focus,
  &:hover,
  &:active {
    text-decoration: none;
  }
  // Remove default focus ring for mouse users
  &:focus {
    outline: none;
    box-shadow: none;
  }
  // Allow focus ring to be visible on the accordion header for keyboard users
  &:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(42, 84, 89, 0.25);
  }

  svg.accordion-arrow {
    vertical-align: text-bottom;
  }
}

// Align volume slider thumb and big play icon
.vjs-svg-icon>svg {
  vertical-align: baseline;
}

// Remove focusable elements from DOM in VideoJS modals when modal is closed
.vjs-theme-ramp>.vjs-modal-dialog[aria-hidden=true] select,
.vjs-theme-ramp>.vjs-modal-dialog[aria-hidden=true] button {
  display: none;
}
