@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/*
This file is not a classical CSS "reset" per se. Instead it restyles all the native HTML elements
to match the design system of the app. Elements are listed in alphabetical order.
*/

*, *::before, *::after {
  box-sizing: border-box;
}

button {
  all: unset;
  cursor: pointer;
}

button, input, select, textarea {
  font: inherit;
}

:root {
  --off-white-color: #f2f2f2;
  --text-greyed: #a9a9a9;
  --disabled: #929292;
  --selection: #F2F2F240;

  --primary: #41ABDE;
  --secondary: #272727;
  --grey: #67655F;
  --shortcut-active-color: #DCC140;

  --error-color: #C70B09;
  --highlight-transparent-color: hsla(0, 0%, 73%, 0.25);
  --bg-transparent-color: rgba(0, 0, 0, 0.4);
  --bg-transparent-color-dark: rgba(0, 0, 0, 0.72);
  --bg-transparent-color-light: hsla(0, 0%, 72%, 0.08);

  --margin-sm: 0.25rem;
  --margin-md: 0.625rem;
  --margin-lg: 1.5rem;
  --margin-xl: 2rem;

  --padding-md: 1.5rem;

  --border-radius: 8px;
  --filter-blur: blur(10px);
}

a {
  color: var(--off-white-color);
  &:hover {
    color: color-mix(in srgb, var(--off-white-color) 80%, black);
  }

  &:visited {
    color: inherit;

    /* Due to the truly astounding stupidity of CSS, :hover and :visited have equal specificity */
    &:hover {
      color: color-mix(in srgb, var(--off-white-color) 80%, black);
    }
  }
}

body {
  height: 100lvh;
  margin: 0;
  padding: 0;

  font-family: "Noto Sans", sans-serif;
  font-weight: 200;

  background-color: #040603;
  background-image:
  url("/img/tmp_bg_blurred_fade.png");
  
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--off-white-color);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 200;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"] {
  padding: 0.75rem;
  border-radius: var(--border-radius);
  border: 1px solid var(--grey);
  background: var(--bg-transparent-color);
  color: inherit;
  font-size: 1rem;

  &:user-invalid,
  &[aria-invalid="true"] {
    border-color: var(--error-color);
  }

  &:disabled {
    color: var(--disabled);
    cursor: not-allowed;
  }
}

input:focus {
  outline: none;
  border-color: var(--primary);
}

li {
  margin: 0;
  padding: 0;
}

nav {
  width: 400px;
  background-color: var(--bg-transparent-color);
  border-radius: var(--border-radius);
  backdrop-filter: var(--filter-blur);
  padding: var(--margin-md);
  margin-bottom: var(--margin-lg);
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.app {
  /* background-color: var(--bg-transparent-color); */
  min-height: 100lvh;

  /* The video page is a fixed-viewport layout: the transcript scrolls
     internally rather than growing the page. That needs a definite height to
     resolve against, so pin it instead of just setting a minimum. */
  &:has(#video-layout) {
    height: 100lvh;
  }

  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: var(--margin-lg);
  padding-block: var(--margin-md);
}

.box {
  background-color: var(--bg-transparent-color);
  backdrop-filter: var(--filter-blur);
  outline: 4px solid var(--highlight-transparent-color);
  margin: 4px; /* to match outline width */
  border-radius: var(--border-radius);
}

.divider-horizontal {
  display: flex;
  align-items: center;
  gap: 1rem;

  &::before,
  &::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--grey);
  }
}

.divider-vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  gap: 0.5rem;

  &::before,
  &::after {
    content: "";
    flex: 1;
    width: 1px;
    background-color: var(--grey);
  }
}

.drop-menu {
  border-radius: calc(var(--border-radius) / 2);
  flex-direction: column;
  min-width: 10rem;
  gap: 0.25rem;
  font-size: 0.9em;
  border: none;
  padding: var(--margin-md) var(--margin-md);
  color: var(--off-white-color);
  text-wrap: none;
  font-weight: 200;

  &:popover-open {
    display: flex;
  }
}

.drop-menu-item {
  position: relative;
  padding: var(--margin-sm) var(--margin-md);
  border-radius: calc(var(--border-radius) / 2);
  
  --width: 2px;
  --before-margin: 8px;

  &:where(button) {
    margin-left: calc(var(--before-margin) - var(--width));
    cursor: pointer;

    &::before {
      position: absolute;
      content: "";
      left: calc(-1 * var(--before-margin));
      top: 50%;
      transform: translateY(-50%);
      height: 70%;
      width: 3px;
      border-radius: var(--border-radius);
    }

    &:hover {
      background-color: var(--highlight-transparent-color);

      &::before {
        background-color: var(--primary);
      }
    }
  }
}

.spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 1px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* Renders an SVG as a solid currentColor shape (instead of an <img>'s baked-in colors),
   so it tints along with surrounding text - e.g. when a button becomes disabled. */
.upload-icon-mask {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-image: url("/img/icons/upload.svg");
  mask-image: url("/img/icons/upload.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.video {
  position: relative;
  &:hover {
    background-color: var(--bg-transparent-color);
    cursor: pointer;
  }
}

.video + .video {
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    height: 0.25px;
    background-color: var(--grey);
    opacity: 0.35;
  }
}

.video-thumbnail {
  width: 160px;
  height: 90px;
}

@media screen and (max-width: 767px) {
  .video-thumbnail {
    height: 80px;
    height: 45px;
  }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse-upload-border {
  0%, 100% { border-color: var(--grey); }
  50% { border-color: var(--primary); }
}