@use "sass:color";
@use "./helpers" as *;
@use "./variables" as *;
@use "./mixins" as *;

html {
  color: var(--html-color);
  font-family: var(--html-font-family, system-ui);
  font-size: var(--html-font-size, 16px);
  line-height: var(--html-line-height, 1.5);
}

body {
  background: var(--body-background);
}

hr {
  margin: var(--hr-margin-top, var(--size-3)) var(--hr-margin-right, 0) var(--hr-margin-bottom, var(--size-3))
    var(--hr-margin-left, 0);
  border-color: var(--hr-border-color, var(--border-color-main));
  border-style: var(--hr-border-style, solid);
  border-width: var(--hr-border-width, 1px 0 0 0);
}

%heading {
  margin: 0 0 0.5rem;
  font-style: $headings-font-style;
  font-weight: $headings-font-weight;
  line-height: $headings-line-height;
  color: $headings-color;
}

h1,
.h1 {
  @extend %heading;

  font-size: var(--h1-font-size);
}

h2,
.h2 {
  @extend %heading;

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

h3,
.h3 {
  @extend %heading;

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

h4,
.h4 {
  @extend %heading;

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

h5,
.h5 {
  @extend %heading;

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

h6,
.h6 {
  @extend %heading;

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

p {
  margin: 0 0 0.5rem;
}

abbr[title] {
  cursor: help;
  text-decoration-skip-ink: none;
}

address {
  margin: 0 0 1rem;
  font-style: normal;
  line-height: inherit;
}

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

ol,
ul,
dl {
  margin: 0 0 1rem;
}

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

dt {
  font-weight: bolder;
}

dd {
  margin-bottom: 0.5rem;
  margin-left: 0;
}

a {
  color: var(--primary);
  text-decoration: $link-decoration;

  &:hover {
    color: color-mix(in oklab, var(--primary), #000 #{$link-shade-percentage});
    text-decoration: $link-hover-decoration;
  }
}

a:not([href], [class]) {
  &,
  &:hover {
    color: inherit;
    text-decoration: none;
  }
}

figure {
  margin: 0 0 1rem;
}

img,
svg {
  vertical-align: middle;
}

table {
  caption-side: bottom;
  border-collapse: collapse;
}

caption {
  padding-top: $table-cell-padding-y;
  padding-bottom: $table-cell-padding-y;
  color: $table-caption-color;
  text-align: left;
}

th {
  font-weight: $table-th-font-weight;
  text-align: inherit;
  text-align: -webkit-match-parent;
}

thead,
tbody,
tfoot,
tr,
td,
th {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}

label {
  display: inline-block;
}

button {
  border-radius: 0;
}

[role="button"] {
  cursor: pointer;
}

select {
  word-wrap: normal;

  &:disabled {
    opacity: 1;
  }
}

[list]:not(
    [type="date"],
    [type="datetime-local"],
    [type="month"],
    [type="week"],
    [type="time"]
  )::-webkit-calendar-picker-indicator {
  display: none !important;
}

button:focus:not(:focus-visible) {
  outline: 0;
}

textarea {
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  float: left;
  width: 100%;
  margin: 0 0 0.5rem;
  font-size: var(--h5-font-size);
  line-height: inherit;

  + * {
    clear: left;
  }
}

::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
  padding: 0;
}

::-webkit-color-swatch-wrapper {
  padding: 0;
}

::file-selector-button {
  font: inherit;
  appearance: button;
}

output {
  display: inline-block;
}

iframe {
  border: 0;
}

summary {
  cursor: pointer;
}

[hidden] {
  display: none !important;
}