/* Scrollbars */

body {
  * {
    scrollbar-color: var(--main-color) var(--bg-color);
    scrollbar-width: thin;
  }

  *::-webkit-scrollbar {
    width: var(--inner-padding);
  }

  *::-webkit-scrollbar-thumb {
    background-color: var(--main-color);
    border: calc(0.5 * var(--inner-padding)) solid var(--bg-color);
    border-left-width: 0;
  }
}

/* Focus */

*:focus-visible {
  outline: calc(0.5 * var(--separator-width)) solid var(--main-color);
  outline-offset: calc(1px + var(--separator-width));
}

*::selection {
  color: var(--bg-color);
  background: var(--main-color);
}

/* Links */

a,
summary {
  display: inline;
  cursor: pointer;

  border-bottom: var(--separator-width) solid currentColor;
  color: inherit;
  text-decoration: none;
}

a:focus,
a:hover,
summary:focus,
summary:hover {
  opacity: 0.8;
}

/* Separators */

hr {
  border: 0;
  height: 0;
  border-top: var(--separator-width) solid var(--main-color);
}

/* Lists */

ul {
  list-style: square;
}

/* Buttons */

button {
  border: var(--separator-width) solid var(--main-color);
  background-color: var(--bg-color);
  color: var(--main-color);
  padding: var(--inner-padding) calc(4 * var(--inner-padding));
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

/* Inputs */

input::placeholder {
  color: var(--main-color);
  opacity: 0.8;
}

input,
select {
  box-sizing: border-box;

  padding: calc(0.5 * var(--inner-padding)) var(--inner-padding);
  color: var(--main-color);
  background-color: var(--bg-color);
  border: var(--separator-width) solid var(--main-color);
  font: inherit;
}

select {
  width: 250px;

  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  background-image: repeating-linear-gradient(
    315deg,
    var(--bg-color),
    var(--bg-color) var(--inner-padding),
    var(--main-color) var(--inner-padding),
    var(--main-color) calc(var(--inner-padding) + var(--separator-width)),
    var(--bg-color) calc(var(--inner-padding) + var(--separator-width)),
    var(--bg-color) 100%
  );
}

label {
  display: inline-block;
  width: 100%;
  max-width: 400px;
}

label input {
  width: 100%;
}

input[type='file'] {
  position: relative;
  font-size: 0;
  text-indent: -100%;
  cursor: pointer;
}