/* HEAD */
[data-misc="head"] {
  display: grid;
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 12);

  &:not(:has(.actions)) {
    border-block-end: 1px solid var(--color-border);
  }

  .heading {
    font-size: var(--text-3xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--text-3xl--line-height);
  }

  .subheading {
    grid-column: 1 / 3;
    color: var(--color-muted-foreground);
    text-wrap: balance;
  }

  .actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    gap: calc(var(--spacing) * 2);

    .pages {
      display: flex;
      gap: calc(var(--spacing) * 2);

      & > a {
        width: calc(var(--spacing) * 8);
      }
    }
  }
}

/* CODE */
[data-misc="code"] {
  position: relative;
  max-width: calc(100vw - calc(var(--spacing) * 12));
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);

  & > pre {
    max-width: 100%;
    overflow: auto;

    span {
      font-family: monospace;
      font-size: 14px;
    }

    & > pre {
      border-radius: 0;
    }

    &.fixed > pre {
      height: 450px;
    }

    .shiki.github-dark {
      background-color: var(--color-code) !important;
    }
  }

  .code-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 57px;
    padding: calc(var(--spacing) * 3);
    background-color: var(--color-background);
    border-block-end: 1px solid var(--color-border);

    .path,
    .type {
      display: flex;
      align-items: center;
      gap: var(--spacing);
      color: var(--color-muted-foreground);
      font-family: monospace;
      font-size: 14px;

      & > svg {
        width: calc(var(--spacing) * 5);
        height: calc(var(--spacing) * 5);
      }

      .options {
        display: flex;

        .option {
          font-family: monospace;
        }
      }
    }

    .actions {
      padding-inline-end: calc(var(--spacing) * 2 + 32px);
    }
  }

  .copy {
    position: absolute;
    width: calc(var(--spacing) * 8);
    inset-block-start: calc(var(--spacing) * 3);
    inset-inline-end: calc(var(--spacing) * 3);
  }
}

/* PREVIEW */
[data-misc="preview"] {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 450px;
  padding: calc(var(--spacing) * 10);
  overflow-y: scroll;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-background);
  background-image:
    linear-gradient(var(--color-muted) 0.5px, transparent 0.5px),
    linear-gradient(to right, var(--color-muted) 0.5px, transparent 0.5px);
  background-size: 80px 80px;

  .preview-area {
    display: flex;
    justify-content: center;
    width: 450px;
  }
}

/* Code Tag */
.code-tag {
  padding: 0.2rem 0.3rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--color-code);
  color: var(--color-code-foreground);
  font-family: monospace;
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
}

/* Responsive */
@media (width <= 1024px) {
  [data-misc="head"] {
    position: sticky;
    z-index: 2;
    inset-block-start: -1px;
    backdrop-filter: blur(2px);
    padding: calc(var(--spacing) * 6);
    background-image: linear-gradient(
      to bottom,
      var(--color-secondary),
      var(--color-secondary),
      transparent
    );

    .heading {
      font-size: var(--text-2xl);
      line-height: var(--text-2xl--line-height);
    }

    .subheading {
      font-size: var(--text-sm);
      line-height: var(--text-sm--line-height);
    }
  }

  [data-misc="preview"] {
    width: calc(100vw - 48px);
    overflow: auto;

    .preview-area {
      width: 100%;
    }
  }

  .dark {
    [data-misc="head"] {
      background-image: linear-gradient(
        to bottom,
        var(--color-background),
        var(--color-background),
        transparent
      );
    }
  }
}

@media (width <= 769px) {
  [data-misc="code"] {
    .code-head {
      .path {
        & > span {
          display: none;
        }
      }
    }
  }
}
