@use "../abstracts/functions" as *;
@use "../abstracts/mixins" as *;

p,
ul,
ol,
dl,
blockquote,
pre {
  margin-block: 1rem;
}

ul ul,
ul ol,
ol ul,
ol ol {
  margin-block: 0;
}

p {
  text-wrap: pretty;
  overflow-wrap: break-word;
}

:disabled,
[aria-disabled="true"] {
  opacity: var(--disabled-opacity);
  cursor: not-allowed;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  transition-duration: var(--transition);
  transition-property: text-shadow, font-weight;
  margin-block: 2rem 1rem;
  color: var(--accent-color);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  font-variation-settings: "FLAR" 100;
  letter-spacing: -0.05em;
  text-decoration: underline;
  text-decoration-color: var(--bg-muted-1);
  text-decoration-thickness: 0.125em;
  text-wrap: balance;
  overflow-wrap: break-word;

  &:target {
    animation: none !important;
    outline: none !important;
    font-weight: var(--font-weight-light);
    text-shadow: var(--text-shadow-glow);
  }
}

h1 {
  font-size: var(--font-size-xxx-large);
}

h2 {
  font-size: var(--font-size-xx-large);
}

h3 {
  font-size: var(--font-size-x-large);
}

h4 {
  font-size: var(--font-size-large);
}

h5 {
  font-size: var(--font-size-medium);
}

h6 {
  font-size: var(--font-size-small);
}

@media only screen and (max-width: 480px) {
  h1 {
    font-size: var(--font-size-xx-large);
  }

  h2 {
    font-size: var(--font-size-x-large);
  }

  h3 {
    font-size: var(--font-size-large);
  }

  h4 {
    font-size: var(--font-size-medium);
  }

  h5 {
    font-size: var(--font-size-small);
  }

  h6 {
    font-size: var(--font-size-x-small);
  }
}

small {
  color: var(--fg-muted-2);
  font-size: var(--font-size-small);
}

abbr[title] {
  cursor: help;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: rpx(1);
}

figcaption {
  color: var(--fg-muted-2);
  font-size: var(--font-size-small);
  text-align: center;
}

blockquote {
  margin: 1rem 0;
  border-inline-start: 0.25rem solid var(--accent-color);
  border-start-start-radius: 0.25rem;
  border-end-start-radius: 0.25rem;
  padding-inline-start: 0.75rem;
  color: var(--fg-muted-2);
}

pre,
code,
kbd,
samp {
  font-family: var(--font-monospace), var(--font-ui-monospace);
}

pre {
  margin: 1rem 0;
  box-shadow: var(--edge-highlight), var(--shadow);
  border-radius: var(--rounded-corner);
  background-color: var(--bg-muted-1);
  padding: 0.75rem 1rem;
  overflow-x: auto;
  scrollbar-width: thin;
  line-height: 1.25;
}

code:not(pre code),
mark,
samp,
q {
  @include chip;
}

code:not(pre code) {
  background-color: var(--red-bg-1);
  padding-block: rpx(3);
  color: var(--red-fg);
  font-size: var(--font-size-small);
}

mark {
  color: var(--accent-color);
}

del {
  color: var(--red-fg);
  text-decoration: line-through;
  text-decoration-thickness: rpx(1);
}

ins {
  color: var(--green-fg);
  text-decoration: underline;
  text-decoration-thickness: rpx(1);
}

samp {
  color: var(--fg-muted-2);
  font-size: var(--font-size-small);
}

q {
  color: var(--fg-muted-2);
  font-style: italic;
}

u {
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--red-fg);
  text-decoration-thickness: rpx(1);
}

progress {
  appearance: none;
  box-shadow: var(--edge-highlight);
  border: none;
  border-radius: 9999px;
  background-color: var(--bg-muted-1);
  padding: 0.25rem;
  width: 100%;
  height: 1rem;
  color: var(--accent-color);

  &:indeterminate {
    background-color: var(--bg-muted-1);
  }

  &:indeterminate::-moz-progress-bar {
    background-color: transparent;
  }

  &::-webkit-progress-bar {
    background-color: transparent;
  }

  &::-moz-progress-bar {
    border-radius: 9999px;
    background-color: var(--accent-color);
  }

  &::-webkit-progress-value {
    border-radius: 9999px;
    background-color: var(--accent-color);
  }
}

kbd {
  display: inline-block;
  transition-duration: var(--transition);
  transition-property: transform, box-shadow, background-color;
  cursor: pointer;
  box-shadow:
    var(--edge-highlight),
    inset 0 -0.125rem 0 var(--bg-muted-2);
  border-radius: var(--rounded-corner-small);
  background-color: var(--bg-muted-1);
  padding: 0 0.375rem;
  font-size: var(--font-size-small);

  // Small nice thingy, keys can be pressed!
  &:active {
    transform: translateY(0.125rem);
    box-shadow: inset 0 rpx(1) 0 var(--bg-muted-2);
    background-color: var(--bg-muted-2);
  }
}

a {
  color: var(--accent-color);
  font-weight: var(--font-weight-semi-bold);
  text-decoration-color: var(--accent-highlight);
  text-decoration-thickness: rpx(1);

  &:hover {
    text-decoration-style: wavy;
  }
}

hr {
  margin: 2rem auto;
  border: 0.125rem solid var(--bg-muted-2);
  border-radius: 9999px;
}

dt {
  font-weight: var(--font-weight-semi-bold);
}

dd {
  margin-inline-start: 1.5rem;
  margin-block-end: 1rem;
}

aside {
  float: inline-end;
  margin-inline-start: 1rem;
  margin-block-end: 1rem;
  box-shadow: var(--edge-highlight), var(--shadow);
  border-radius: var(--rounded-corner);
  background-color: var(--bg-muted-1);
  padding: 1rem;
  width: calc(var(--content-width) / 3);

  @media only screen and (max-width: 720px) {
    float: none;
    margin-inline-start: 0;
    width: 100%;
  }

  :first-child {
    margin-block-start: 0;
  }

  :last-child {
    margin-block-end: 0;
  }
}

details {
  display: flow-root;
  transition: padding-block-end var(--transition);
  margin-block-end: 1rem;
  box-shadow: var(--edge-highlight), var(--shadow);
  border-radius: var(--rounded-corner);
  background-color: var(--bg-muted-1);
  padding: 0.75rem 1rem;

  &::details-content {
    display: block;
    opacity: 0;
    transition-behavior: allow-discrete;
    transition-duration: var(--transition);
    transition-property: opacity, block-size, content-visibility;
    block-size: 0;
    overflow: hidden;
  }

  &[open] {
    padding-block-end: 1rem;

    &::details-content {
      opacity: 1;
      block-size: auto;
      block-size: calc-size(auto, size);
    }

    summary {
      color: var(--accent-color);

      &::before {
        transform: scaleY(-1);
      }

      @supports not (block-size: calc-size(auto, size)) {
        & ~ * {
          animation: slide-in-up var(--transition-bezier);
        }
      }
    }
  }

  summary {
    transition: var(--transition);
    color: var(--fg-muted-1);
    font-weight: var(--font-weight-semi-bold);
    list-style: none;

    &::-webkit-details-marker {
      display: none;
    }

    &::before {
      @include icon(pseudo);
      --icon: var(--icon-caret-down);
      display: inline-block;
      vertical-align: rpx(-2);
      transition:
        all var(--transition),
        transform var(--transition-bezier);
      margin-inline-end: 0.25rem;
    }
  }

  & > :last-child,
  & > :last-child img {
    margin-block-end: 0;
  }
}

figure {
  margin-inline: 0;
}

ol,
ul {
  padding-inline-start: 1.5rem;
}

li {
  margin-block: 0.25rem;
  padding-inline-start: 0.25rem;

  &::marker {
    color: var(--accent-color);
    font-weight: var(--font-weight-semi-bold);
  }
}

b,
strong {
  font-weight: var(--font-weight-semi-bold);
}