@use 'pix-design-tokens/typography';

.module-passage {
  /** Revert Pix UI styles for Modulix */
  h4,
  h5,
  h6,
  p {
    margin: var(--pix-spacing-1x) 0;
  }

  h4 {
    @extend %pix-title-xs;
  }

  h5,
  h6 {
    @extend %pix-title-xxs;
  }

  a:not([class]) {
    color: revert;
    text-decoration: revert;
  }

  ul:not([class]),
  ol {
    margin: var(--pix-spacing-1x) 0;
    padding: revert;
    list-style: revert;
  }

  p.pix-list-inline {
    display: inline;

    & + ul {
      display: inline;
      padding: 0;
      list-style-type: none;

      &::before {
        content: ' ';
      }

      li {
        display: inline;

        &:not(:last-child)::after {
          content: ', ';
        }
      }
    }
  }

  hr {
    width: 80%;
    border: 2px solid var(--pix-neutral-100);
    border-radius: 4px;
    opacity: 0.6;
  }

  code {
    @extend %pix-monospace;
  }

  details {
    color: var(--pix-neutral-800);

    & + details {
      margin-top: var(--pix-spacing-2x);
    }

    summary {
      color: var(--pix-neutral-900);
      font-weight: var(--pix-font-bold);
    }
  }

  p + details {
    margin-top: var(--pix-spacing-4x);
  }

  iframe {
    width: 100%;
    border: none;
  }

  /* See https://youtube.com/watch?v=345V2MU3E_w */
  img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    font-style: italic;
    vertical-align: middle;
    background-color: var(--pix-neutral-0);
    background-repeat: no-repeat;
    background-size: contain;
    shape-margin: 1rem;
  }

  .modulix-two-columns {
    columns: 2;
  }

  .modulix-three-columns {
    columns: 3;
  }
}
