@use "../ui/vars" as *;
@use "../ui/base/themes" as *;
@use "../ui/base/mdn";
@use "../ui/molecules/grids/grids.scss" as *;
@use "../ui/base/typography" as *;

.main-page-content {
  overflow-wrap: break-word;
  padding: 3rem 1rem 1rem;

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-variant-ligatures: no-contextual;

    a:link,
    a:visited {
      color: var(--text-primary);
      text-decoration: none;
    }

    a:hover,
    a:focus {
      text-decoration: underline;
    }

    a:active {
      background-color: transparent;
    }

    a[href^="#"] {
      &::before {
        color: var(--text-inactive);
        content: "#";
        display: inline-block;
        font-size: 0.7em;
        line-height: 1;
        margin-left: -0.8em;
        text-decoration: none;
        visibility: hidden;
        width: 0.8em;
      }

      &:hover {
        &::before {
          visibility: visible;
        }
      }
    }
  }

  h1 {
    &::after {
      text-decoration-color: var(--category-color);
    }
  }

  /* reduce the top margin of the interactive example heading */
  section h2:first-of-type {
    margin-top: 2rem;
  }

  a:not(.button) {
    color: var(--text-link);
    width: fit-content;

    &:visited:not([href^="#"]) {
      // Distinguish visited links (excl. anchor links).
      color: var(--text-visited);
    }

    &:active,
    &:active:visited {
      background-color: var(--text-link);
      color: #fff;

      code {
        background-color: transparent;
        color: #fff;
      }
    }

    &[aria-current] {
      color: var(--text-link);
      font-weight: var(--font-body-strong-weight);
      text-decoration: none;
    }
  }

  img {
    /* In dark mode, required for images with black text on transparent background. */
    background: #fff;
    border: 1px solid var(--border-primary) !important;
    border-radius: var(--elem-radius);
    /* Required to prevent the border from scaling images, making them look blurry. */
    box-sizing: content-box;
    /* Required for alt texts. */
    color: #1b1b1b;
    display: inline-block;
    display: flex;
    height: auto;
    margin: 2rem auto;
  }

  ul,
  ol {
    margin: 1rem 0 2rem;
    padding-left: 2rem;

    li {
      margin: 0.5rem 0;

      > p {
        margin: 0;
      }
    }
  }

  ul {
    list-style: disc;

    ul {
      list-style-type: circle;
      margin: 0;
      padding-left: 1rem;
    }
  }

  ol {
    list-style: decimal;

    ol {
      list-style: lower-roman;
      margin: 0;
    }
  }

  dd ol,
  dd ul {
    margin-bottom: 1rem;
    padding-left: 3rem;
  }

  td ul,
  td ol {
    padding-left: 1rem;
  }

  dd li {
    margin-bottom: 1rem;
  }

  td li {
    margin-bottom: 0.5rem;
  }

  dl {
    dt {
      margin-bottom: 0.5rem;
      margin-top: 2rem;

      a[href^="#"] {
        color: inherit;
        position: relative;
        text-decoration: none;

        &:hover,
        &:focus {
          text-decoration: underline;
        }

        &::before {
          color: var(--text-inactive);
          content: "#";
          display: inline-flex;
          font-size: 0.7em;
          line-height: 1;
          margin-left: -0.8em;
          text-decoration: none;
          top: 0.5em;
          visibility: hidden;
          width: 0.8em;
        }

        &:hover::before {
          visibility: visible;
        }
      }
    }

    dd {
      margin-bottom: 1rem;
      margin-left: 1rem;

      dl {
        /* Nested definition list. */
        border-left: 1px solid var(--border-primary);
        padding-left: 1rem;
      }
    }

    p {
      margin: 0 0 1rem;
    }
  }

  // specific styles to override base styles. The Markdown compiler
  // adds extra divs, so this is a way for these styles to not
  // stomp out component styles.
  .section-content {
    p {
      font: var(--type-article-p);
    }

    figure {
      margin-bottom: 1rem;
    }

    .prev-next {
      display: flex;
      gap: 0.5rem;
      justify-content: space-between;
      list-style: none;
      margin: 1rem 0;
      padding: 0;
      text-align: center;

      li {
        display: flex;
        margin: 0;
      }

      .button {
        margin: 0;
        max-width: inherit;
      }

      .button-wrap {
        color: inherit;
      }
    }

    blockquote > :last-child {
      margin-bottom: 0;
    }

    scrim-inline {
      aspect-ratio: 1.5;
      display: block;
      margin: 0.5rem auto;
      max-width: 36rem;
      width: 100%;
    }

    scrim-inline[survey] {
      aspect-ratio: 1.2;
    }
  }

  #specifications + table {
    margin-bottom: 2rem;
  }

  .css-formal-syntax {
    margin-bottom: 0;

    ~ footer {
      background-color: var(--code-background-block);
      border: 1px solid transparent;
      border-top: 1px solid var(--border-secondary);
      font-size: var(--type-smaller-font-size);
      margin-bottom: 2rem;
      padding: 0.5rem 2.5rem 0.5rem 1rem;

      > a {
        display: inline-block;
      }
    }
  }

  @media (min-width: $screen-sm) {
    padding: 3rem;
    // Reduce space to article footer.
    padding-bottom: 0;
  }

  @media (min-width: $screen-md) {
    // Reduce space to article footer.
    margin-bottom: 0;
    padding: 0;
  }
}

// Base typography styles. Trying to remove as much as possible from
// the .main-page-content override.
b,
strong {
  font-weight: var(--font-body-strong-weight);
  letter-spacing: 0.02rem;
}

table {
  border: 1px solid var(--border-primary);
  border-collapse: collapse;
  width: 100%;

  th {
    background: var(--background-primary);
    font-weight: var(--font-body-strong-weight);
    line-height: 1.5;
    text-align: left;
  }

  td,
  th {
    border: 1px solid var(--border-primary);
    padding: 0.5rem 0.75rem;
    vertical-align: middle;
  }

  td {
    .code-example pre {
      margin: 0;
    }

    ul {
      margin: 0;
    }
  }

  caption {
    font-weight: var(--font-body-strong-weight);
    margin: 1rem 0 0.5rem;
  }

  &.properties {
    border: none;
    font-size: var(--type-base-font-size);

    th,
    td {
      border: none;
    }

    th {
      background: none;
    }

    tr {
      border-bottom: 1px solid var(--border-secondary);

      &:first-child {
        border-top: 1px solid var(--border-primary);
      }

      &:last-child {
        border-bottom: 1px solid var(--border-primary);
      }
    }
  }

  &.properties,
  &.standard-table {
    tr {
      &:nth-child(odd) th,
      &:nth-child(odd) td {
        background-color: var(--background-secondary);
      }
    }
  }
}

iframe {
  border: 1px solid var(--border-primary);
  max-width: 100%;
  width: 100%;

  /* "Live Samples" discussion here:
  https://github.com/mdn/yari-private/issues/370,
  These src attributes taken from unsafe-html.js */
  &[src*="https://mdn.github.io"],
  &[src*="https://www.youtube-nocookie.com"],
  &[src*="https://jsfiddle.net"],
  &[src*="https://test262.report"],
  &.nobutton,
  &.sample-code-frame {
    background: #fff;
    border: 1px solid var(--border-primary);
    border-radius: var(--elem-radius);
    box-sizing: content-box;
    padding: 1rem;
    width: calc(100% - 2rem - 2px);
  }
}

h1,
h2,
h3 {
  letter-spacing: var(--heading-letter-spacing);
}

h1 {
  font: var(--type-heading-h1);
  margin-bottom: 2rem;
  word-break: break-word;

  @media (min-width: $screen-md) {
    font: var(--type-heading-h1);
  }
}

h2 {
  font: var(--type-heading-h2);
  margin: 4rem 0 0.5rem;
}

h3 {
  font: var(--type-heading-h3);
  margin: 2rem 0 0.5rem;
}

/* When an h3 immediately follows an h2 we want to use
 * a smaller top margin. We also make accommodation
  for situations where there is an empty div
  between the two elements */
h2 ~ div ~ h3,
h2 ~ h3 {
  margin-top: 1rem;
}

h4 {
  font: var(--type-heading-h4);
  letter-spacing: 0.5px;
  margin: 2rem 0 1rem;
}

h5 {
  font: var(--type-heading-h5);
  letter-spacing: 1.5px;
  margin: 2rem 0 1rem;
  text-transform: uppercase;
}

h6 {
  font: var(--type-heading-h6);
  letter-spacing: 1.5px;
  margin: 2rem 0 1rem;
  text-transform: uppercase;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  code {
    font-size: inherit;
  }
}

p {
  margin: 1rem 0 2rem;
}

blockquote {
  border-left: 4px solid var(--border-secondary);
  color: var(--text-secondary);
  margin-bottom: 2rem;
  padding: 1rem 2rem;

  p {
    margin: 0;
  }
}

pre,
code,
.code-example {
  border-radius: var(--elem-radius);
  font-family: var(--font-code);
  font-size: var(--type-smaller-font-size);
  tab-size: 4;
}

code {
  background: var(--code-background-inline);
  padding: 0.125rem 0.25rem;
  width: fit-content;
}

pre {
  background-color: var(--code-background-block);
  border: 1px solid transparent;
  margin: 1rem 0 2rem;
  padding: 1rem 2.5rem 1rem 1rem;

  code {
    background: none;
    color: var(--text-primary);
    padding: 0;
  }
}

math[display="block"] {
  margin: 1rem 0 2rem;
}

.example-good,
.example-bad {
  padding: 0 1rem;
  position: relative;

  &::before {
    background-size: 24px;
    content: "";
    float: right;
    height: 16px;
    margin-left: 8px;
    width: 16px;
  }
}

.example-bad + .copy-icon,
.example-good + .copy-icon {
  display: none;
}

.example-bad {
  background-color: var(--background-critical);

  &::before {
    background-color: var(--icon-critical);
    mask-image: url("../assets/icons/no.svg");
  }
}

.example-good {
  background-color: var(--background-success);

  &::before {
    background-color: var(--icon-success);
    mask-image: url("../assets/icons/checkmark.svg");
  }
}

/*
 * multi-column layout on pages with an index such as
 * https://developer.mozilla.org/en-US/docs/Web/API#Specifications
*/
.index {
  margin-bottom: 1rem;

  ul {
    margin: 0.5rem 0 2rem;

    @media (min-width: $screen-xl) {
      columns: 3;
    }

    li {
      break-inside: avoid-column;
      margin: 0 0 0.5rem;
    }
  }

  .icon-experimental,
  .icon-nonstandard {
    color: var(--icon-information);
  }

  .icon-deprecated {
    color: var(--icon-critical);
  }
}

.callout {
  background: var(--background-secondary);
  border-radius: var(--elem-radius);
  box-shadow: var(--shadow-01);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 2rem 0;
  padding: 1rem;
  text-align: left;

  h4 {
    margin: 0;
  }

  p {
    font: var(--type-smaller-font-size);
    margin: 0;
  }
}

.code-example {
  --code-action-color: var(--text-secondary);
  margin-bottom: 2rem;
  position: relative;

  [class*="interactive-example"] {
    display: none;
  }

  .example-header {
    align-items: baseline;
    background-color: var(--background-secondary);
    border-bottom: 1px solid var(--border-secondary);
    border-top-left-radius: var(--elem-radius);
    border-top-right-radius: var(--elem-radius);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0;
    padding: 0.1rem 1rem;

    &.active {
      background-color: var(--background-toc-active);
    }

    ~ pre,
    ~ iframe {
      border-top: none;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      margin-top: 0;

      &:not(:last-child) {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        margin-bottom: 0;
      }
    }

    .ai-explain-info-toggle {
      --icon-size: 12px;
      background-color: var(--icon-secondary);
      cursor: pointer;
      mask-size: contain;

      &:hover,
      &:focus {
        background-color: var(--icon-information);
      }
    }

    .ai-explain-info {
      background: var(--background-information);
      font-size: smaller;
      margin-bottom: 0.5rem;
      order: 23;
      padding: 0.5rem;
      width: 100%;
    }

    .language-name {
      margin-right: auto;
      text-transform: uppercase;
    }
  }

  .ai-explain-answer {
    background-color: var(--background-secondary);
    border: 1px solid var(--border-primary);
    font: var(--type-article-p);

    ~ .ai-explain-answer {
      border-top: none;
    }

    > .ai-explain-header {
      background-color: var(--background-primary);
      border-bottom: 1px solid var(--border-secondary);
      margin: 0;
      padding-top: 1rem;
      width: 100%;

      > span {
        padding: 0.25rem 1rem;
      }

      > pre {
        background-color: var(--background-primary);
        margin: 0;
        padding: 0.25rem 1rem;
      }
    }

    > div > p {
      margin: 0;
      padding: 0.5rem 1rem;
    }

    .ai-explain-feedback {
      align-items: center;
      display: flex;
      flex-direction: row;
      font-size: smaller;
      gap: 0.5rem;
      justify-content: flex-end;
      padding: 0.5rem;

      button {
        cursor: pointer;

        &.icon-thumbs-up:hover,
        &.icon-thumbs-up:focus {
          background-color: var(--icon-success);
        }

        &.icon-thumbs-down:hover,
        &.icon-thumbs-down:focus {
          background-color: var(--icon-critical);
        }
      }
    }
  }

  .play-button,
  .ai-explain-button {
    color: var(--code-action-color);
    cursor: pointer;
    margin: 0;
    text-transform: capitalize;

    &:hover {
      opacity: 0.6;
    }

    &:first-child {
      margin-left: auto;
    }
  }

  .playlist {
    align-items: center;
    display: flex;
    gap: 0.5rem;

    > label {
      color: var(--code-action-color);
      cursor: pointer;
      padding: 1px;
      text-transform: capitalize;

      &:hover {
        opacity: 0.6;
      }
    }

    > input {
      height: 0;
      margin: 0;
      opacity: 0;
      position: absolute;
      width: 0;

      ~ label::before {
        background-color: var(--code-action-color);
        content: "";
        display: inline-block;
        height: 1rem;
        margin-right: 4px;
        mask-image: url("../assets/icons/queue.svg");
        mask-size: cover;
        vertical-align: middle;
        width: 1rem;
      }

      &:focus ~ label {
        opacity: 1;
      }

      &:focus-visible ~ label {
        opacity: 1;
        outline-color: var(--accent-primary);
        outline-offset: 1px;
        outline-style: auto;
      }

      &:checked ~ label {
        color: var(--category-color);
        opacity: 1;

        &::before {
          mask-image: url("../assets/icons/queued.svg");
        }
      }

      &:checked ~ label:before {
        background-color: var(--category-color);
      }
    }
  }

  .ai-explain-button.ai-explain-highlight {
    animation: 1s ease-in 1 ai-explain-highlight-frames;
  }

  .play-button::before {
    background-color: var(--code-action-color);
    content: "";
    display: inline-block;
    height: 1rem;
    margin-right: 4px;
    mask-image: url("../assets/icons/play.svg");
    mask-size: cover;
    vertical-align: middle;
    width: 1rem;
  }

  .copy-icon {
    align-self: center;
    background-color: var(--code-action-color);
    cursor: pointer;
    height: 1rem;
    margin-top: -0.1rem;
    mask-image: url("../assets/clippy.svg");
    mask-size: cover;
    padding: 0;
    width: 1rem;

    &:hover,
    &:focus {
      opacity: 0.6;
    }

    &:first-child {
      margin-left: auto;
    }
  }

  .copy-icon-message {
    background: var(--text-primary);
    border-radius: var(--elem-radius);
    color: var(--text-invert);
    font-size: 0.8125rem;
    opacity: 1;
    padding: 0.125rem;
    position: absolute;
    right: 0.25rem;
    top: 2rem;
  }

  .example-good,
  .example-bad {
    padding: 1rem;
  }
}

a.page-not-created {
  cursor: not-allowed;

  &:link,
  &:hover,
  &:visited,
  &:not([href]),
  &:focus {
    color: var(--icon-critical);
    text-decoration: underline wavy;
  }
}

.badge {
  border: 1px solid var(--border-primary);
  border-radius: 4rem;
  color: var(--text-secondary);
  font-size: var(--type-tiny-font-size);
  padding: 0.125rem 0.375rem;
  white-space: nowrap;
}

kbd {
  border: 2px solid var(--border-secondary);
  border-radius: var(--elem-radius);
  box-shadow: var(--border-secondary);
  box-shadow: inset 0 -1px 0 0 var(--border-secondary);
  color: var(--text-secondary);
  font-size: 0.825rem;
  padding: 0.25rem;
}

.loading-error pre {
  overflow-y: scroll;
  white-space: pre;
}

.sidebar-container {
  --offset: var(--sticky-header-with-actions-height);
  --max-height: calc(100vh - var(--offset));

  max-height: var(--max-height);
  position: sticky;
  top: var(--offset);
  z-index: var(--z-index-sidebar-mobile);

  @media (min-width: $screen-md) and (min-height: $screen-height-place-limit) {
    display: flex;
    flex-direction: column;
  }

  @media (min-width: $screen-md) {
    z-index: auto;

    .sidebar {
      mask-image: linear-gradient(
        to bottom,
        rgb(0, 0, 0) 0% calc(100% - 3rem),
        rgba(0, 0, 0, 0) 100%
      );
    }

    @media not (min-height: $screen-height-place-limit) {
      overflow: auto;
    }
  }

  &.toc-container,
  .toc-container {
    .place {
      grid-area: toc;
      margin: 0;
    }
    @media (min-width: $screen-xl) {
      display: flex;
      flex-direction: column;
      gap: 0;
      height: calc(100vh - var(--offset));
      mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgb(0, 0, 0) 3rem calc(100% - 3rem),
        rgba(0, 0, 0, 0) 100%
      );
      overflow: auto;
      position: sticky;
      top: var(--offset);

      .place {
        margin: 1rem 0;
        padding-bottom: 3rem;
      }
    }
    @media (max-width: #{$screen-md - 1}) {
      .place {
        display: none;
      }
    }
  }
  @media (min-width: $screen-xl) {
    display: contents;

    .sidebar {
      mask-image: none;
    }
  }
}

@keyframes ai-explain-highlight-frames {
  0% {
    color: var(--text-primary);
    opacity: 0.4;
  }

  50% {
    color: var(--category-color);
    opacity: 1;
  }

  100% {
    color: var(--text-primary);
    opacity: 0.4;
  }
}

html a.only-in-en-us:after {
  content: "(en-US)";
  display: inline-block;
  font-size: var(--type-tiny-font-size);
  margin-left: 0.5ch;
  vertical-align: super;
}

html[lang="de"] a.only-in-en-us:after {
  content: "(engl.)";
}

html[lang="es"] a.only-in-en-us:after {
  content: "(inglés)";
}

html[lang="fr"] a.only-in-en-us:after {
  content: "(angl.)";
}

html[lang="ja"] a.only-in-en-us:after {
  content: "(英語)";
}

html[lang="ko"] a.only-in-en-us:after {
  content: "(영어)";
}

html[lang="ru"] a.only-in-en-us:after {
  content: "(англ.)";
}

html[lang="pt-BR"] a.only-in-en-us:after {
  content: "(inglês)";
}

html[lang="zh-CN"] a.only-in-en-us:after {
  content: "（英语）";
  margin-left: unset;
  vertical-align: baseline;
}

html[lang="zh-TW"] a.only-in-en-us:after {
  content: "（英語）";
  margin-left: unset;
  vertical-align: baseline;
}

@media (max-width: $screen-sm - 1px) {
  .table-container {
    overflow-x: auto;
  }
}

@media (min-width: $screen-sm) {
  .table-container {
    margin: 0 -3rem;
    overflow: auto;
    width: 100vw;
  }

  .table-container-inner {
    min-width: max-content;
    padding: 0 3rem;
    position: relative;

    &:after {
      bottom: 0;
      content: "";
      height: 10px;
      position: absolute;
      right: 0;
      width: 10px;
    }
  }
}

@media (min-width: $screen-md) {
  .table-container {
    width: calc(100% + 6rem);
  }
}

@media (min-width: $screen-xl) {
  .table-container {
    margin: 0;
    width: 100%;
  }

  .table-container-inner {
    padding: 0;
  }
}