html {
  background-color: #080808;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

button:focus-visible {
  outline: 1px solid var(--color-light) !important;
}

:root {
  /* --accent-color: oklch(); */
  --color-light: #eee;
  --color-text: #eee;
  --color-bg: #080808;
  --transition-short: 0.15s;
  --transition-med: 0.3s;
  interpolate-size: allow-keywords;
  transition-behavior: allow-discrete;
}

html {
  font-size: 14px;
  font-family: Raleway, sans-serif;
}

body {
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  transition: opacity 300ms;

  &:link,
  &:visited {
    color: var(--color-text);
  }

  &:hover,
  &:active {
    color: cadetblue;
  }


  &:hover {
    opacity: 0.8;
  }
}

button {
  user-select: none;
}

.active {
  border-bottom: 1px solid white;
}

@property --toggle-color {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

label.toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;

  button {
    width: 80px;
    height: 40px;
    padding: 0;
    border: none;
    outline: none;
    margin: 0;
    padding-inline: 3px;
    padding-block: 3px;
    border-radius: 10px;

    display: grid;
    transition: grid-template-columns 500ms;
    grid-template-columns: 0fr min-content 1fr;

  }

  .toggle-on {
    display: none;
  }

  .toggle-off {
    display: initial;
  }

  &>button>div {
    box-shadow: none;
    transition: --toggle-color 0.5s;
    --toggle-color: 0%;
    grid-column: 2/3;
    pointer-events: none;
    aspect-ratio: 1/1;
    height: 100%;
    background-color: color-mix(in srgb, oklch(84% 0.18 106) var(--toggle-color), oklch(60% 0 272));
    /* background-color: color-mix(in oklch, oklch(84% 0.18 106) var(--toggle-color), oklch(60% 0 272)); */
    transition: --toggle-color 0.5s;
    border-radius: 8px;

  }

  &[data-toggled="true"] {
    .toggle-on {
      display: initial;
    }

    .toggle-off {
      display: none;
    }

    button {

      grid-template-columns: 1fr min-content 0fr;

      &>div {
        --toggle-color: 100%;
      }

    }

  }
}

.no-interaction {
  pointer-events: none;
}