/// _commons.scss - Common styles for elements.
/// All selectors in this files refers to HTML elements (no class definition).

@use '../base/colors';
@use '../base/transitions';
@use './define-map';
@use './mixins';
@use './variables';
@use '../element/math';

html[data-theme='light'] {
  @include define-map.mixin(colors.get(light));
}

html[data-theme='dark'] {
  @include define-map.mixin(colors.get(dark));
}

a {
  border-radius: 0.5rem;
  text-decoration: none;
  color: var(--color-a-text);
  padding: 0.1rem;
  transition: transitions.get(default-a);
}

@media (hover: hover) {
  a:hover {
    background-color: var(--color-a-background-hover);
  }
}

p {
  margin-block: 1em;
  margin-inline: 0;
}

b,
strong {
  font-weight: bold;
}

i,
em {
  font-style: italic;
}

u {
  text-decoration: underline;
}

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

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

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

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

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

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

dl,
ol,
ul {
  margin-block: 1em;
  padding-inline-start: 40px;
}

dt {
  font-weight: bold;
}

dd {
  margin-inline-start: 40px;
}

li {
  list-style: disc;

  ol & {
    list-style: decimal;
  }
}

tbody {
  vertical-align: middle;
}

table {
  border-collapse: separate;
  border-spacing: 2px;
}

pre {
  padding: 1rem;
  border-radius: 1rem;
  overflow-x: auto;
  background-color: var(--color-pre-code-background);

  mn > &,
  mi > & {
    display: inline;
    white-space: pre;
    padding: 0 0.2em;
    margin: 0;
    border-radius: 0;
    background-color: inherit;
    font-family: inherit;
    vertical-align: middle;
  }
}

code {
  @include mixins.input-font;

  mn > pre > & {
    color: inherit;
  }
}