@use "../mixin";

main#article-content {
  display: flex;
  flex-direction: column;
  grid-column: 1 / 10;

  & {
    > div {
      width: 100%;
    }

    > hgroup {
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      gap: 12px;

      position: relative;

      width: 100%;

      margin-block-end: 24px;

      h1 {
        @include mixin.typescale-style("display-large");

        text-align: center;
      }

      div {
        display: flex;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;

        width: 100%;

        hr {
          flex-grow: 1;

          margin: 0px;
        }

        h6 {
          display: grid;
          align-items: start;
          gap: 6px;
          grid-template-columns: max-content auto;

          width: max-content;

          line-height: 18px;
          text-align: justify;

          &::before {
            @include mixin.material-symbols($name: "message", $size: 18);

            vertical-align: middle;
          }
        }
      }
    }
  }

  *[class^="language-"] {
    position: relative;

    margin-block-end: 12px;

    border-radius: var(--md-sys-shape-corner-large-increased);

    overflow: hidden;

    button.copy {
      position: absolute;
      right: 0px;
      top: 0px;

      height: 42px;
      width: 42px;

      margin-block-start: 6px;
      margin-inline-end: 6px;
      padding: 0px;

      border: none;
      border-radius: var(--md-sys-shape-corner-extra-large);

      background-color: transparent;

      cursor: pointer;
      opacity: 0;
      transition: border-radius var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial),
        opacity var(--md-sys-motion-spring-default-effect-duration) var(--md-sys-motion-spring-default-effect);
      visibility: hidden;
      z-index: 2;

      &::before {
        @include mixin.material-symbols($name: "content_copy", $size: 18, $line-height: 42);

        color: var(--md-ref-palette-neutral90);
      }

      &.copied::before {
        content: "check";
      }

      &:active {
        border-radius: var(--md-sys-shape-corner-large);
      }

      &:focus-visible {
        outline-color: var(--md-ref-palette-neutral90) !important;

        z-index: 3;
      }
    }

    span.lang {
      @include mixin.typescale-style("body-medium", $font-family: Source Code Pro, $font-variation-settings: "wght" 700);

      position: absolute;
      right: 0px;
      top: 0px;

      margin-block-start: 6px;
      margin-inline-end: 9px;

      color: var(--md-ref-palette-neutral50);
      text-transform: uppercase;

      transition: color var(--md-sys-motion-spring-default-effect-duration) var(--md-sys-motion-spring-default-effect);
      z-index: 1;
    }

    pre.shiki {
      grid-column: 2/3;
      grid-row: 1;

      margin: 0px;
      padding-block: 15px;

      overflow: overlay;
      z-index: 0;

      code {
        display: grid;

        padding: 0px;

        width: 100%;

        > span:not(:has(span)) {
          height: 25px;
        }
      }
    }

    div.line-numbers-wrapper {
      display: grid;
      grid-column: 1/2;
      grid-row: 1;

      width: max-content;

      padding-block: 15px;
      padding-inline: 12px;

      text-align: right;
      vertical-align: middle;

      color: var(--md-ref-palette-neutral-variant50);

      border-right: 1px solid var(--md-ref-palette-neutral-variant50);
      background-color: var(--md-ref-palette-neutral10);

      user-select: none;
      -moz-user-select: none;
      z-index: 0;

      span {
        @include mixin.typescale-style("body-large", $font-family: Source Code Pro, $line-height: 25px);

        display: block;

        height: 25px;
      }

      br {
        display: none;
      }
    }

    &.line-numbers-mode {
      display: grid;
      grid-template-columns: max-content auto;
    }

    &:hover {
      span.lang {
        opacity: 0;
        visibility: hidden;
      }

      button.copy {
        opacity: 1;
        visibility: visible;

        &:hover {
          background-color: var(--md-ref-palette-neutral10);

          &::before {
            color: var(--md-ref-palette-neutral90);
          }
        }
      }
    }
  }

  .custom-block {
    display: grid;
    column-gap: 12px;
    grid-template-columns: 24px auto;

    position: relative;

    margin-block-start: 12px;
    padding-block: 12px;
    padding-inline: 12px;

    border-radius: var(--md-sys-shape-corner-large-increased);

    z-index: 0;

    &::before {
      @include mixin.material-symbols($size: 24);

      grid-column: 1;
    }

    p.custom-block-title {
      grid-column: 2;

      margin: 0px;
      padding: 0px;

      font-variation-settings: "wght" 700;

      user-select: none;
      -moz-user-select: none;
    }

    > * {
      grid-column: 2 / 3;

      margin-inline: 0px;
      padding-block: 0px;
    }

    &.details {
      display: block;

      padding: 0px;

      &::before {
        display: none;
      }

      summary {
        @include mixin.typescale-style("body-large");

        display: grid;
        column-gap: 12px;
        grid-template-columns: 24px auto;

        padding-block: 12px;
        padding-inline: 12px;

        font-variation-settings: "wght" 700;

        border-radius: var(--md-sys-shape-corner-large-increased);

        cursor: pointer;
        transition: var(--md-sys-motion-spring-slow-spatial-standard-duration)
          var(--md-sys-motion-spring-slow-spatial-standard);
        user-select: none;
        -moz-user-select: none;

        &::before {
          @include mixin.material-symbols("expand_more");

          font-variation-settings: "wght" 500;

          transform: rotateZ(-90deg);
          transition: var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
        }
      }

      :not(summary) {
        margin-inline: 12px;
      }

      img {
        display: block;
      }

      &:hover {
        background-color: var(--md-sys-color-inverse-on-surface);
      }

      &[open] {
        padding-block-end: 12px;

        background-color: var(--md-sys-color-inverse-on-surface);

        summary {
          padding-block-end: 12px;

          &::before {
            transform: rotateZ(0deg);
          }
        }
      }
    }

    &.info {
      color: var(--md-sys-color-on-blue-container);

      background-color: var(--md-sys-color-blue-container);

      &::before {
        content: "info";

        color: var(--md-sys-color-on-blue-container);
      }
    }

    &.tip {
      color: var(--md-sys-color-on-green-container);

      background-color: var(--md-sys-color-green-container);

      &::before {
        content: "lightbulb_2";

        color: var(--md-sys-color-on-green-container);
      }
    }

    &.warning {
      color: var(--md-sys-color-on-yellow-container);

      background-color: var(--md-sys-color-yellow-container);

      &::before {
        content: "brightness_alert";

        color: var(--md-sys-color-on-yellow-container);
      }
    }

    &.danger {
      color: var(--md-sys-color-on-red-container);

      background-color: var(--md-sys-color-red-container);

      &::before {
        content: "dangerous";

        color: var(--md-sys-color-on-red-container);
      }
    }
  }

  .headline-block {
    position: relative;

    padding-block-end: 24px;

    & > * {
      margin-block-start: 12px;
      padding-block-end: 0px;
    }

    &:first-child .title-with-achor {
      margin-block-start: 0px;
    }

    .title-with-achor {
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        display: inline-block;

        line-height: 54px;

        border-radius: var(--md-sys-shape-corner-medium);

        a {
          text-decoration: none;
        }
      }

      .title-anchor {
        @include mixin.typescale-style("body-large");

        display: inline-flex;
        align-items: center;
        flex-direction: column;
        gap: 3px;

        position: absolute;
        left: -60px;
        top: 0px;

        height: 54px;
        width: 54px;

        color: var(--md-sys-color-on-surface);
        text-decoration: none;

        border-radius: var(--md-sys-shape-corner-full);

        opacity: 0;
        transition: var(--md-sys-motion-spring-fast-effect-duration) var(--md-sys-motion-spring-fast-effect);
        user-select: none;
        -moz-user-select: none;

        &:focus-visible {
          opacity: 1;
          z-index: 2;

          span:nth-of-type(1) {
            opacity: 1;
          }
        }

        span:nth-of-type(1) {
          @include mixin.material-symbols($size: 24);

          display: block;

          height: 54px;
          width: 54px;

          line-height: 54px;
          text-align: center;

          border-radius: var(--md-sys-shape-corner-full);

          background-color: transparent;

          opacity: 0;
        }

        span.visually-hidden {
          @include mixin.typescale-style("label-medium");

          padding-block: 3px;
          padding-inline: 9px;

          word-break: keep-all;

          border-radius: var(--md-sys-shape-corner-small);

          background-color: var(--md-sys-color-surface-container-low);

          opacity: 0;
          visibility: hidden;
        }
      }
    }

    &:hover {
      .title-anchor {
        opacity: 1;

        span:nth-of-type(1) {
          opacity: 1;
        }

        &:hover {
          span:nth-of-type(1):hover {
            background-color: var(--md-sys-color-surface-container-low);

            + span.visually-hidden {
              opacity: 1;
              visibility: visible;
            }
          }
        }
      }
    }
  }

  a {
    text-decoration: underline solid;
  }

  blockquote {
    position: relative;

    margin-inline: 0px;
    padding-inline-start: 24px;

    color: var(--md-sys-color-on-tertiary-container);

    &::before {
      content: "";

      display: block;

      position: absolute;
      left: calc(24px / 2 - 3px);

      height: 100%;
      width: 6px;

      border-radius: var(--md-sys-shape-corner-small);

      background-color: var(--md-sys-color-inverse-on-surface);
    }

    blockquote {
      margin-inline: 12px;
    }

    p {
      margin-block: 12px;
      margin-inline: 0px;
      padding-block-end: 0px;
    }

    .task-list-container {
      padding-block-end: 0px;
      padding-inline: 0px;

      li.task-list-item {
        display: grid;
        align-items: center;
        gap: 12px;
        grid-template-columns: 20px auto;

        input.task-list-item-checkbox[type="checkbox"] {
          &::before {
            @include mixin.material-symbols("check_box_outline_blank", $size: 20);

            font-variation-settings: "FILL" 1;
          }

          appearance: none;

          grid-column: 1 / 2;

          margin: 0px;

          height: 20px;
          width: 20px;

          &:checked {
            &::before {
              @include mixin.material-symbols("check_box", $size: 20);
            }
          }
        }

        &::before {
          display: none;
        }
      }
    }

    & > {
      ul,
      ol {
        margin-inline: 0px;
      }
    }
  }

  code {
    @include mixin.typescale-style("body-large", $font-family: Source Code Pro);

    display: inline-block;

    width: max-content;

    padding-block: 24px;

    text-indent: initial;
    vertical-align: baseline;
    word-break: break-word;

    border-radius: var(--md-sys-shape-corner-small);

    overflow: initial;

    &::selection {
      color: var(--md-sys-color-on-tertiary);

      background-color: var(--md-sys-color-tertiary);
    }

    span.line {
      display: inline-block;

      width: 100%;

      padding-inline: 12px;

      &.highlighted {
        background-color: var(--md-ref-palette-neutral10);

        span {
          background-color: var(--md-ref-palette-neutral10);
        }
      }

      span {
        @include mixin.typescale-style("body-large", $font-family: Source Code Pro);
      }
    }
  }

  hr {
    margin-block: 12px;
  }

  p {
    position: relative;

    margin-block-start: 6px;

    a {
      border-radius: var(--md-sys-shape-corner-small);
    }

    code {
      @include mixin.typescale-style("body-large", $font-family: Source Code Pro);
      display: inline;

      min-width: max-content;

      padding: 0px;

      vertical-align: baseline;
    }

    em {
      display: inline-block;

      font-style: normal;

      transform: skewX(-10deg);
    }

    s {
      opacity: 0.5;
    }

    strong {
      font-variation-settings: "wght" 700;
    }

    &:has(img) {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;

      img {
        display: inline-block;

        width: 100%;

        border-radius: var(--md-sys-shape-corner-medium);

        cursor: pointer;
        transition: border-radius var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);

        &:hover {
          border-radius: var(--md-sys-shape-corner-extra-large);
        }
      }
    }
  }

  pre {
    padding-block-end: 12px;

    overflow: overlay;

    &.shiki {
      position: relative;
    }
  }

  strong {
    font-variation-settings: "wght" 700;
  }

  sup.footnote-ref {
    vertical-align: bottom;

    a[href] {
      @include mixin.typescale-style("label-large");

      text-decoration: none;
    }
  }

  table {
    margin-block-end: 12px;
  }

  ul,
  ol {
    padding-block-end: 12px;

    a {
      border-radius: var(--md-sys-shape-corner-small);
    }

    li {
      @include mixin.typescale-style("body-large");

      position: relative;

      margin-block-start: 12px;

      vertical-align: middle;

      code {
        display: inline;

        padding: 0px;
      }

      ul {
        padding: 0px;
      }
    }
  }

  ol {
    li {
      &::marker {
        font-variation-settings: "wght" 700;
      }

      p {
        margin-inline: 0px;
        padding-block: 0px;
      }
    }
  }

  ul {
    padding-inline-start: 24px;

    list-style-type: none;

    li {
      position: relative;

      &::before {
        content: "";

        display: inline-block;
        position: absolute;
        left: -20px;
        top: var(--bullet-top);

        height: 16px;
        width: 16px;

        background-color: var(--md-sys-color-on-surface);

        -webkit-mask: var(--via-svg-list-bullet) 0 0/100% no-repeat;
        mask: var(--via-svg-list-bullet) 0 0/100% no-repeat;

        transform: rotate(var(--random-rotation, 0deg));
      }
    }
  }
}

div#article-beside {
  grid-column: 10 / 13;

  position: sticky;
  top: 120px;

  .post-info {
    display: flex;
    flex-direction: column;
    gap: 3px;

    margin-inline-start: 16px;
    margin-bottom: 18px;

    p {
      @include mixin.typescale-style("label-small");

      display: inline-flex;
      align-items: center;
      flex-direction: row;
      flex-wrap: nowrap;
      gap: 3px;

      color: var(--md-sys-color-outline);

      &::before {
        @include mixin.material-symbols($size: 14);
      }

      &.date-publish::before {
        content: "calendar_today";
      }

      &.date-update::before {
        content: "update";
      }

      &.id::before {
        content: "flag";
      }
    }
  }
}

@media screen and (max-width: 1600px) {
  main#article-content {
    grid-column: 1 / 10;
  }

  div#article-beside {
    grid-column: 10 / 13;
  }
}

@media screen and (max-width: 1200px) {
  main#article-content {
    grid-column: 1 / 7;

    .headline-block a.title-anchor {
      gap: 0px;

      position: relative;
      left: inherit;
    }
  }

  div#article-beside {
    grid-column: 7 / 9;
  }
}

@media screen and (max-width: 840px) {
  main#article-content {
    grid-column: 1 / 7;

    .custom-block > * {
      grid-column: 1 / 3;
    }

    .headline-block {
      padding-inline: 12px;
    }
  }

  div#article-beside {
    grid-column: 1 / 7;
  }
}

@media screen and (max-width: 600px) {
  main#article-content {
    grid-column: 1 / 5;

    p:has(img) {
      grid-template-columns: 1fr;
    }
  }

  div#article-beside {
    grid-column: 1 / 5;
  }
}
