@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  *:focus-visible {
    outline: var(--focus-outline);
    outline-offset: 0;
  }

  *:where([type="range"]):focus-visible {
    outline: none;
  }

  html {
    font: var(--font, var(--font-style) var(--font-variant) var(--font-weight)
    var(--font-stretch) var(--font-size) / var(--line-height)
    var(--font-family));
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    
    scroll-behavior: smooth;
    
    /* Prevent html scrollable */
    &:has(dialog[open], 
          dialog[popover]:popover-open) {
      overflow: hidden;
    }
  }

  body {
    accent-color: var(--accent-color);
    color: var(--font-color);
    background: var(--background-color);
    letter-spacing: var(--letter-spacing);
    
    min-height: 100vh;
  }

  main {
    display: block;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font: var(--h--font-weight) 4rem / var(--h--line-height) var(--h--font-family);
    
    letter-spacing: var(--h--letter-spacing);
    color: var(--h--color);
    
    margin: 2.5rem 0 1.25rem;
  }
  
  h1 {
    font-size: clamp(2.799rem, calc(2.799rem + 0.125vw), 3.799rem);
  }

  h2 {
    font-size: clamp(2.332rem, calc(2.332rem + 0.125vw), 3.332rem);
  }

  h3 {
    font-size: clamp(1.944rem, calc(1.944rem + 0.125vw), 2.944rem);
    line-height: 1.125;
  }

  h4 {
    font-size: clamp(1.62rem, calc(1.62rem + 0.125vw), 2.62rem);
    line-height: 1.125;
  }

  h5 {
    font-size: clamp(1.35rem, calc(1.35rem + 0.125vw), 2.35rem);
    line-height: clamp(1em, 1.5em - .75vw, 1.5em);
    letter-spacing: normal;
  }

  h6 {
    font-size: clamp(1.125rem, calc(1.125rem + 0.125vw), 2.125rem);
    line-height: clamp(1em, 1.5em - .75vw, 1.5em);
    letter-spacing: normal;
  }

  blockquote {
    --data-quoter-marker: attr(data-quoter-marker, "\2014 \00A0");
    border-width: var(--blockquote--border-width);
    border-style: var(--blockquote--border-style, solid);
    border-color: var(--blockquote--border-color);
    padding: 1rem;
    margin: 0 0 0 1rem;

    :where(&) footer {
      color: var(--blockquote__footer--color);
      margin: var(--blockquote__footer--margin);
    }

    :where(&) footer:before {
      content: var(--data-quoter-marker);
    }
  }

  ul,
  ol {
    padding: 0 0 0 1.25em;
  }

  fieldset {
    border: 0 var(--boundary--border-style) var(--boundary--border-color);
    border-width: var(--boundary--border-width);
    padding: 0.5rem;

    :where(&) > label {
      margin: 0 1rem 0 0;
    }
  }

  legend {
    color: inherit;
    display: table;
    padding: 0; /* 3 */
    white-space: normal;
  }

  details {
    display: block;
  }

  summary {
    cursor: pointer;
    display: list-item;
  }

  dt {
    font-weight: var(--small-header--font-weight, bold);
    color: var(--font-color-alt-1);
  }

  pre {
    color: var(--pre--color);
    background: var(--pre--background);
    border: var(--pre--border, var(--boundary--border-width) var(--boundary--border-style) var(--boundary--border-color));
    padding: 1rem;
    overflow: auto;
  }

  hr {
    border: var(--boundary--border-width) var(--boundary--border-style) var(--boundary--border-color);
    border-width: 0 0 1px;
    box-sizing: content-box;

    color: inherit;
    overflow: visible;
    margin: 0.5rem 0;
  }

  a {
    display: inline-block;
  }

  [href] {
    color: var(--href--color);

    &:focus,
    &:hover {
      filter: brightness(105%);
    }

    &:visited {
      color: var(--href--visited-color);
    }
  }

  abbr[title] {
    border-bottom: none;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  audio,
  video {
    display: inline-block;
  }

  audio:not([controls]) {
    display: none;
  }

  b,
  strong {
    font-weight: bold;
  }

  code,
  kbd,
  samp {
    font: normal var(--cks--font-weight) var(--cks--font-size) var(--cks--font-family);
    font-optical-sizing: auto;
  }

  code {
    color: var(--code--color);
    background: var(--code--background);
  }

  kbd {
    color: var(--kbd--color);
    background: var(--kbd--background);
    border-radius: var(--kbd--border-radius);

    &:has(kbd) {
      background-color: unset;
      border: 0 var(--kbd_-kbd--border-style) var(--kbd_-kbd--border-color);
      border-width: var(--kbd_-kbd--border-width);
      padding: var(--kbd_-kbd--padding);
    }
    
    kbd {
      font-weight: var(--kbd__kbd--font-weight);
      
      color: var(--kbd__kbd--color);
      background-color: unset;
    }
  }

  small {
    font-size: 80%;
  }

  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }

  sub {
    bottom: -0.25em;
  }

  sup {
    top: -0.5em;
  }

  img {
    border: none;
    
    max-height: 90vh;
    max-width: 90vw;
    
    display: inline-block;
  }
  
  figure {
    :where(&) img {
      margin: auto auto 0.5rem;
      line-height: 1;
    }
  }
  
  figcaption {
    font-size: 0.875em;
  }

  svg:not(:root) {
    overflow: hidden;
  }

  table {
    text-indent: 0;
    border-color: inherit;
  }
  
  th {
    font-weight: var(--small-header--font-weight, bold);
    color: var(--font-color-alt-1);
  }

  td {
    padding: 0.5em;
  }

  template {
    display: none;
  }

  /**
    * Dialog show once per-event (call), then remove the elemen from DOM. 
    * Popover, just hide the element when not in use.
    */
  dialog,
  [popover] {
    /* Start fade in, end fade out. */
    pointer-events: none;
    
    color: inherit;
    background: var(--background-color);
    border: unset;
    opacity: 0;
    
    box-shadow: var(--shadow-float);
    
    position: fixed;
    inset: 50% auto auto 50%;

    display: none;
    padding: 1rem;

    text-align: initial;
    
    overflow: visible;

    z-index: 1000;
    
    transform: translate(-50%, -50%) scale(0.85);
    transition:
      opacity 350ms ease-in-out,
      transform 350ms ease-in-out,
      overlay 350ms allow-discrete,
      display 350ms allow-discrete;
  }

  dialog {
    color: var(--dialog--color, var(--font-color));
    background: var(--dialog--background, var(--background-color));
    border: 0 var(--dialog--border-style, solid)  var(--dialog--border-color);
      border-width: var(--dialog--border-width, 1px);
    border-radius: var(--dialog--border-radius, 0.125em);
    
    min-height: 5rem;
    height: var(--dialog--height, auto);
    max-height: calc(100vh - 4rem);
    
    min-width: clamp(280px, 100vw - 4rem, 400px);
    width: var(--dialog--width, auto);
    max-width: clamp(280px, 100vw - 4rem, 1160px);
  }

  [popover] {
    height: var(--popover--height, auto);
    max-height: calc(100vh - 2rem);
    
    width: var(--popover--width, auto);
    max-width: clamp(4rem, 100vw - 2rem, 1200px);
  }

  dialog[open],
  [popover]:popover-open {
    /* End fade in; start fade out. */
    pointer-events: initial;
    
    opacity: 1;
    
    display: block;
    transform: translate(-50%, -50%) scale(1);
        
    /* Start values for fade in. */
    @starting-style {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.85);
    }
  }

  dialog::backdrop,
  [popover]::backdrop {
    background: var(--backdrop--background);
    backdrop-filter: blur(.125rem);
  }

  progress {
    display: inline-block;
    vertical-align: baseline;
  }
  
  button,
  input,
  optgroup,
  option,
  select,
  textarea {
    color: var(--controls--color);
    font: var(--font-weight) var(--font-size)/var(--line-height) var(--font-family);
  }
  
  button,
  input,
  optgroup,
  select,
  textarea {
    border: 0 var(--controls--border-style) var(--controls--border-color);
      border-width: var(--controls--border-width);
    margin: 0;
    min-height: var(--controls--min-height);
    padding: var(--controls--padding);
  }
  
  button,
  input,
  select {
    text-transform: none;
  }

  button,
  [type="button"],
  [type="reset"],
  [type="submit"],
  .btn {
    cursor: pointer;

    font: var(--btn--font, normal var(--btn--font-weight) var(--btn--font-size) / var(--btn--line-height) var(--font-family));
    color: var(--btn--color, var(--font-color));

    background-color: var(--btn--background, var(--background-color-clickable, revert));

    border: 0 var(--btn--border-style, solid) var(--btn--border-color, var(--border-color-control));
      border-width: var(--btn--border-width, 1px);
    border-radius: var(--btn--border-radius, 0.25em);

    box-shadow: var(--btn--shadow, var(--shadow-clickable));

    min-height: var(--controls--min-height);

    position: relative;

    padding: var(--btn--padding);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;

    overflow: visible;

    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    
    /* INFO: TEST*/
    :where(&:hover, &:focus):not(:disabled){
      filter:brightness(103%);
    }

    :where(&:active):not(:disabled){
      box-shadow:none;
      transform:translateY(1px);
      filter:brightness(105%);
    }

    &:disabled {
      color: revert;
    }

    &:focus-visible {
      box-shadow: none;
    }
  }

  input,
  textarea,
  select,
  [type="color"] {
    background: var(--input--background);
    border-radius: var(--controls--border-radius);
  }
  
  select {
    min-width: 1.7em;
  }
  
  optgroup {
    color: var(--font-color-alt-2);
    border: none;
    padding: 0.125em;
  }
  
  option {
    margin: 0 0 0 .5em;
    padding: 0.25em 0.25em 0.125em;
    
    &:checked {
      color: var(--accent-color);
      background-color: var(--background-color-text);
    }
  }
  
  textarea {
    overflow: auto;
    vertical-align: top;
  }
  
  input {
    overflow: visible;
  }
  
  [type="checkbox"],
  [type="file"],
  [type="radio"],
  [type="range"] {
    cursor: pointer;
  }
  
  [type="color"] {
    cursor: pointer;
    background: inherit;
    padding: 0.25em;
    min-height: 2rem;
  }

  [type="date"],
  [type="datetime-local"],
  [type="month"],
  [type="week"],
  [type="time"] {
    padding: 0.125em 0.25em;
  }

  [type="number"]::-webkit-inner-spin-button,
  [type="number"]::-webkit-outer-spin-button {
    height: auto;
  }

  [type="search"] {
    -webkit-appearance: textfield;
    appearance: textfield;
  }

  [type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  [type="file"] {
    padding: 0 0.125em 0 0;
  }

  ::file-selector-button {
    cursor: pointer;
    -webkit-appearance: button;
    
    font: var(--btn--font, normal var(--btn--font-weight) var(--btn--font-size) / var(--btn--line-height) var(--font-family));
    color: var(--btn--color, var(--font-color));
    
    background-color: var(--btn--background, var(--background-color-clickable, revert));
    border: 0 var(--btn--border-style, solid) var(--btn--border-color, var(--border-color-control));
      border-width: var(--btn--border-width, 1px);
    
    padding: 0.125em 0.25em;
    margin: -1px 0.125em -1px -1px;
  }
  
  [type="range"]:focus-visible::-webkit-slider-thumb {
    border-radius: 50%;
    outline: var(--focus-outline);

    height: 0.8em;
    width: 0.8em;
  }
  
  [type="checkbox"],
  [type="radio"] {
    min-height: initial;
    padding: 0;
  }
  
  input[type=checkbox] {
    -webkit-appearance: none;
    -moz-appearance: none;
        appearance: none;
    font-size: inherit;
    width: .75em;
    height: .75em;
    display: inline-grid;
    place-content: center;
  }
    
  input[type=checkbox]::before {
    content: "";
    width: 0.5em;
    height: 0.65em;
    -webkit-clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
            clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform: scale(0);
    background-color: var(--accent-color);
  }

  input[type=checkbox]:checked::before {
    transform: scale(1) rotate(15deg);
  }
  
  input[type=radio] {
    -webkit-appearance: none;
    -moz-appearance: none;
        appearance: none;
    font-size: inherit;
    width: .875em;
    height: .875em;
    border-radius: 50%;
    display: inline-grid;
    place-content: center;
    
    translate: 0 -.05lh;
  }

  input[type=radio]::before {
    content: "";
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    transform: scale(0);
    background-color: var(--accent-color);
  }

  input[type=radio]:checked::before {
    transform: scale(1);
  }

  [disabled] {
    cursor: not-allowed;
    filter: contrast(.5);
  }

  [hidden] {
    display: none;
  }

  /* INFO: To make extra scroll margin */
  :target {
    scroll-margin-block: 5ex;
  }

  :where(
    dl,
    ol,
    ul,
    fieldset,
    p,
    details,
    pre,
    form,
    address,
    blockquote,
    figure,
    table
  ):has(
    + :is(
      dl,
      ol,
      ul,
      fieldset,
      p,
      details,
      pre,
      form,
      address,
      blockquote,
      figure,
      table,
      nav
    )
  ) {
    margin-bottom: var(--elements-block-level-space);
  }

  /*Fix outline for :focus-visible*/
  input,
  select,
  textarea,
  audio,
  video,
  details,
  button,
  [type="button"],
  [type="reset"],
  [type="submit"],
  .btn {
    margin: 0.25rem;
  }

  @-moz-document url-prefix() {
    button,
    [type="button"],
    [type="reset"],
    [type="submit"],
    .btn {
      padding: var(--moz-btn-padding);
    }

    textarea,
    [type="email"],
    [type="number"],
    [type="password"],
    [type="search"],
    [type="tel"],
    [type="text"],
    [type="url"],
    [type="date"],
    [type="datetime"],
    [type="datetime-local"],
    [type="month"],
    [type="week"],
    [type="time"] {
      padding: var(--moz-input--padding);
    }

    select {
      min-width: 1.5em;
      padding: var(--moz-input--select-padding);

      &:focus {
        outline: var(--focus-outline);
      }
    }

    input[type=range] {
      background: transparent;
      border: none;

      &:active {
        filter: brightness(120%);
      }

      &::-moz-range-thumb {
        background: var(--accent-color);
        border: none;

        height: 1rem;
        width: 1rem;
      }

      &:focus-visible::-moz-range-thumb {
        outline: var(--focus-outline);
      }

      &::-moz-range-track {
        cursor: pointer;
        background: var(--accent-color);
        border-radius: .25rem;
        height: .5rem;
      }
    }
  }
}