@import url("/assets/companion_window-96bf7d18.css");
@import url("/assets/content_list-25c248ae.css");
@import url("/assets/locked_status-75c10a42.css");
@import url("/assets/common-13c5bbb7.css"); /* needed for .sul-embed-stanford-only-text on download */

#main-display {
  overflow: hidden;
}
/* VideoJS CSS overrides for responsive layout
   See http://andreassauer.name/experimente/video-js/demo.html */
.video-js {
  width: 100% !important;

  &::after {
    content: ".";
    display: block;
    height: 0;
    margin: 0 0 0 -100%;
    padding: 0;
    padding-top: 40.1%;
    position: relative;
    visibility: hidden;
  }

  /* Ensure fullscreen media is as large as possible. */
  &.vjs-fullscreen {
    audio,
    video {
      height: 100% !important;
      width: 100% !important;
    }
  }

  .vjs-poster {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
  }

  /* Style the CC button when they have captions enabled
     This won't work on Firefox unless enabled by layout.css.has-selector.enabled in about:config
     Other than this, there doesn't seem to be a way to style the state */
  .vjs-subs-caps-button:has(
      + .vjs-menu > .vjs-menu-content > .vjs-selected.vjs-captions-menu-item
    ) {
    border-bottom: 2px solid red;
  }

  .vjs-text-track-settings {
    background: white !important;
    border-radius: var(--modal-border-radius);
    box-shadow: 5px 10px 5px #0000001e;
    height: auto !important;
    margin: auto;
    max-width: 72vw;
    position: relative !important;
    z-index: 5;

    .vjs-modal-dialog-content {
      position: relative;

      label,
      legend {
        color: #000;
      }

      .vjs-track-settings-controls button {
        color: var(--active-color);
        background-image: none;
        font-size: 1.2em;
        padding: 3px;
        text-transform: uppercase;
      }
    }
  }
}

.video-js .vjs-tech {
  position: relative;
}

.sul-embed-media-file {
  height: 100%;
  width: 100%;
}

.sul-embed-media-wrapper {
  --prev-next-container-height: 65px;
  display: inline-block;
  height: calc(100% - var(--prev-next-container-height));
  position: relative;
  text-align: center;
  width: 100%;
  audio {
    min-width: 300px;
    width: 100%;
  }

  .osd {
    height: 100%;
    width: 100%;
  }

  .prev-next-container {
    height: var(--prev-next-container-height);
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centers content vertically */
    align-items: center; /* Centers content horizontally */
    #current-title {
      font-size: 0.875rem;
    }
    .prev-next-buttons {
      display: flex;
      .left-arrow svg {
        transform: rotate(180deg);
      }
      button {
        background: none;
        color: inherit;
        border: none;
        padding: 0;
        font: inherit;
        cursor: pointer;
        width: 1.5rem;
        height: 1.5rem;
        margin: 0px 0.25rem;
        svg {
          fill: #0000008a;
        }
        &:disabled {
          svg {
            fill: #0000003d;
          }
        }
      }
    }
  }
}

.transcript {
  --highlight-background-color: rgb(243, 249, 255);
  --highlight-border-color: rgb(131, 193, 250);
  .cue {
    border: 1px solid transparent;
    padding-right: 2px;
    line-height: 16pt;
    /* For cue-new-speaker, transcript scroll needs to scroll up more
       This behavior is also alright for regular cue elements */
    scroll-margin-bottom: 5rem;

    &:hover {
      background-color: rgba(0, 0, 0, 0.15);
      cursor: pointer;
    }
    &.cue-new-speaker:not(:first-of-type)::before {
      content: "";
      display: block;
      margin-top: 1rem;
    }
  }
  .highlight {
    background-color: var(--highlight-background-color);
    border: 1px solid var(--highlight-border-color);
    border-radius: 0.25rem;
  }
}

.transcript-controls {
  font-size: 0.8rem;
  flex-direction: column;
  padding-bottom: 1.5rem;

  input {
    margin-left: 0.6rem;
  }

  input,
  select {
    margin-right: 0.6rem;
    vertical-align: middle;
  }
}