@use '../variables' as *;
@use '../mixins' as *;

// -- reset margins

:where(h1, h2, h3, h4, h5, h6, p, ol, ul, dl, blockquote, figure, pre, hr) {
  margin: 0;
}

// -- head styles
@each $key, $value in cat-token('size.font.head') {
  :where(h#{$key}),
  .cat-h#{$key} {
    @include cat-head($key);
  }
}

// -- body styles
@each $key, $value in cat-token('size.font.body') {
  .cat-text-#{$key} {
    @include cat-body($key);
  }
}

// -- mono styles
@each $key, $value in cat-token('size.font.mono') {
  .cat-mono-#{$key} {
    @include cat-mono($key);
  }
}

hr,
.cat-hr {
  display: block;
  border: 0;
  height: 1px;
  background-color: cat-token('color.ui.border.default');
  overflow: hidden;
  flex-shrink: 0;
}

// ----- links

a {
  color: cat-token('color.theme.primary.text');
  text-decoration: cat-token('font.decoration.link');
  transition: color cat-token('time.transition.s') linear;

  &:hover {
    color: cat-token('color.theme.primary.textHover');
    text-decoration: cat-token('font.decoration.linkHover');
  }

  &:active {
    color: cat-token('color.theme.primary.textActive');
  }

  &:focus-visible {
    outline: 2px solid cat-token('color.ui.border.focus');
    // outline-offset: -2px;
  }
}

a[tabindex='-1']:focus {
  outline: none;
}

// ----- emphasis

b,
strong,
.cat-strong {
  font-weight: 700;
}

mark,
.cat-mark {
  padding: 0.125rem 0.25rem;
  background-color: $cat-mark-color;
}

small,
.cat-small {
  font-size: 0.875em;
}

.cat-underline {
  text-decoration: underline;
}

.cat-line-through {
  text-decoration: line-through;
}

// ----- lists

ol,
ul {
  padding-left: 2rem;
}

nav ol,
nav ul,
ol.cat-plain,
ul.cat-plain {
  list-style: none;
  padding: 0;
}

dt {
  font-weight: 700;
}

dd:not(:last-child) {
  margin-bottom: 0.5rem;
  margin-left: 0;
}

// ----- lead

.cat-lead {
  @include cat-body('xl', 300);
}

// ----- blockquotes & figures

blockquote {
  padding: 0.75rem 0 0.75rem calc(1.5rem - 2px);
  border-left: 2px solid cat-token('color.ui.border.quote');
  color: cat-token('color.ui.font.quote');
  @include cat-body('l', null);
  font-style: italic;

  > :last-child {
    margin-bottom: 0 !important;
  }

  &.cat-text-center {
    padding-left: 2rem;
    padding-right: 2rem;
    border-left: none;
  }

  &.cat-text-right {
    padding-left: 0;
    padding-right: calc(2rem - 4px);
    border-left: none;
    border-right: 2px solid cat-token('color.ui.border.quote');
  }
}

figcaption {
  @include cat-body('s', null);
}

// ----- code

code,
samp,
kbd,
pre {
  @include cat-mono('m');
}

pre {
  overflow: auto;

  code {
    margin: 0;
    padding: 0;
    color: inherit;
    background: none;
    box-shadow: none;
    border-radius: 0;
    word-wrap: normal;
    word-break: normal;
  }
}

kbd,
code {
  margin: 0 0.125rem;
  color: cat-token('color.ui.font.muted');
  background: cat-token('color.ui.background.surface');
  box-shadow: 0 0 0 2px cat-token('color.ui.border.default');
  border-radius: cat-border-radius('s');
}

kbd {
  font-size: cat-mono-font-size('s');
  display: inline-block;
  min-width: 1.5rem;
  line-height: cat-body-line-height('m');
  padding: 0 0.375rem;
  text-align: center;
  vertical-align: top;
  white-space: nowrap;
}

code {
  @include cat-break-word;
  padding: 0.0625rem 0.25rem;
}

// ----- editorial typography

.cat-article {
  @include cat-break-word;

  :where(h1, h2, h3),
  :is(.cat-h1, .cat-h2, .cat-h3) {
    color: $cat-font-color-head;
    font-family: $cat-font-family-head, $font-fallback-base, cat-token('font.family.emoji'), $font-fallback-emoji;
    margin-bottom: calc($cat-head-margin-bottom * var(--cat-article-spacer, 1));

    &:has(+ h1, + h2, + h3, + h4, + h5, + h6, + .cat-h1, + .cat-h2, + .cat-h3, + .cat-h4, + .cat-h5, + .cat-h6) {
      margin-bottom: calc($cat-head-margin-bottom * 0.5 * var(--cat-article-spacer, 1));
    }
  }

  :where(h4, h5, h6),
  :is(.cat-h4, .cat-h5, .cat-h6) {
    color: $cat-font-color-head;
    font-family: $cat-font-family-head, $font-fallback-base, cat-token('font.family.emoji'), $font-fallback-emoji;
    margin-bottom: calc($cat-head-margin-bottom * 0.5 * var(--cat-article-spacer, 1));
  }

  :where(p, ol, ul, dl, blockquote, figure, pre, table, cat-alert, cat-card):not(:last-child) {
    margin-bottom: calc($cat-body-margin-bottom * var(--cat-article-spacer, 1));
  }

  ol,
  ul,
  dl {
    ol,
    ul,
    dl {
      margin-bottom: 0;
    }
  }

  hr,
  .cat-hr {
    margin: calc($cat-body-margin-bottom * var(--cat-article-spacer, 1)) 0;
  }
}