/* Alphabetical order should be maintained in this file. */
:root {
  --shortcut-guide-visibility: visible;
}

.button-bare, .button-shortcut {
  all: unset;
  font-size: 1rem;
  background-color: transparent;
  padding: var(--margin-md);
  border-radius: var(--border-radius);

  &[aria-pressed="true"]:not([aria-disabled="true"]),
  &:hover:not([aria-disabled="true"]) {
    cursor: pointer;
    background-color: var(--highlight-transparent-color);
  }

  &[aria-disabled="true"] {
    color: var(--disabled);

    .content {
      text-decoration: line-through;
    }
  }
}

.button-primary, .button-secondary {
  display: block;
  box-sizing: border-box;
  padding: 0.4rem;

  color: var(--off-white-color);
  border: none;
  outline: 4px solid var(--highlight-transparent-color);
  border-radius: var(--border-radius);
  cursor: pointer;
  font-size: 1.1rem;
  text-decoration: none;
  text-align: center;

  &:disabled {
    background-color: var(--secondary);
    color: var(--text-greyed);
    cursor: not-allowed;
  }
}

.button-primary {
  background-color: var(--primary);

  &:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--primary) 95%, black);
  }

  /* Disabled because a submission is in flight, not because the form is invalid - keep the normal look. */
  &[aria-busy="true"]:disabled {
    background-color: var(--primary);
    color: var(--off-white-color);
    cursor: wait;
  }
}

.button-secondary  {
  background-color: var(--secondary);

  &:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--secondary) 95%, black);
  }

  /* Disabled because a submission is in flight, not because the form is invalid - keep the normal look. */
  &[aria-busy="true"]:disabled {
    background-color: var(--secondary);
    color: var(--off-white-color);
    cursor: wait;
  }
}

.button-shortcut {
  display: flex;
  flex-direction: column;
  align-items: center;

  .content {
    display: flex;
    flex-direction: row;
    gap: var(--margin-md);
  }
}

.controls {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding-inline: var(--margin-xl);
  user-select: none;

  .main-controls-row {
    /* display: grid;
    grid-template-columns: 1fr auto 1fr; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--margin-lg);

    /* .controls-left {
      display: flex;
      justify-content: flex-end;
    }

    .controls-right {
      display: flex;
      justify-content: flex-start;
    } */
  }

  .toggle-shortcuts-guide {
    align-self: flex-end;
    display: flex;
    align-items: center;
    gap: var(--margin-sm);
    color: var(--text-greyed);
  }
}

.progress {
  --seeker-size: 13px;
  bottom: 0;
  transform: translateY(100%);

  .punch-in {
    position: absolute;
    
    height: 4px !important;
    width: calc(var(--seeker-size) / 2);

    &.left {
      background-color: var(--primary);
      border-bottom-left-radius: var(--border-radius);
      left: 0;
    }

    &.right {
      background-color: var(--grey);
      left: calc(100% - var(--seeker-size) / 2);
      border-bottom-right-radius: var(--border-radius);
    }
  }

  .progress-inner {
    position: absolute;
    width: calc(100% - var(--seeker-size));
    height: 4px !important;
    left: calc(var(--seeker-size) / 2);
    bottom: 0;
    background-color: red;
  }

  .time-display {
    user-select: none;
    position: absolute;
    top: 0.5rem;
    font-size: 0.85rem;
  }

  .seeker {
    width: var(--seeker-size);
    height: var(--seeker-size);
    bottom: calc(-1 * var(--seeker-size) / 3.14);
    transform: translateX(-50%);
    transition: transform 0.1s;
    
    &.active {
      transform: translateX(-50%) scale(1.4);
    }
  }
}

.shortcut-guide {
  display: flex;
  flex-direction: row;
  font-size: 0.8rem;
  color: var(--text-greyed);
  visibility: var(--shortcut-guide-visibility);
  overflow-wrap: normal;
  
  .button-shortcut:hover & {
    --shortcut-guide-visibility: visible;
  }

  .shortcut-key-pressed {
    color: var(--shortcut-active-color)
  }
}

#video-layout {
  display: grid;
  justify-content: center;
  flex: 1;
  /* Override the flex default of `min-height: auto`, which would let this grow
     past the viewport to fit the transcript instead of letting it scroll. */
  min-height: 0;

  /* MOBILE (default): single column, stacked. Transcript takes the 1fr row so
     it absorbs the leftover height rather than overflowing the page. */
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto 1fr;
  grid-template-areas:
    "title"
    "video"
    "controls"
    "transcript"
    ;
  
  /* DESKTOP: top bar + two columns (left stack / right sidebar) */
  @media (min-width: 950px) {
    grid-template-columns: 6fr 4fr;
    /* controls takes the 1fr row, so it expands to fill whatever
        space is left after topbar/title/video are sized */
    /* grid-template-rows: 72px auto auto 1fr; */
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "title      transcript"
      "video      transcript"
      "controls   transcript";
    .topbar { display: flex; }
  }

  .title {
    grid-area: title;
    padding-inline: var(--margin-sm);
  }

  .video {
    grid-area: video;
  }

  .transcript {
    grid-area: transcript;
    display: flex;
    flex-direction: column;
    min-height: 0; /* let the content pane scroll instead of stretching us */
    padding-top: var(--margin-md);
    padding-bottom: var(--margin-md);

    .timestamp {
      position: absolute;
      bottom: -5px;
      left: 0;
      transform: translate(-40%, 100%);
      color: var(--text-greyed);
      font-size: 0.7rem;
      text-wrap: nowrap;
      user-select: none;
    }

    .transcript-content {
      line-height: 4.75rem;
      /* line-height: 3.2; */
      font-size: 1.1rem;
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      padding-top: var(--margin-md);
      padding-inline: var(--margin-xl);

      &:lang(ja), &:lang(zh) {
        font-size: 1.4rem;
        line-height: 5rem;
      }
    }

    .transcript-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-inline: var(--margin-xl);
    }

    .word {
      position: relative;
      display: inline-block;
      line-height: 1.5;
      overflow-wrap: anywhere;
      white-space: pre;

      &.inside-loop {
        background-color: var(--selection);
      }

      &.last-in-fragment {
        margin-right: 20px;
      }
    }
  }

  .controls {
    grid-area: controls;
  }
}