:root {
  --transition-dur: 0.6s;
  --transition-timing: cubic-bezier(0.65, 0, 0.35, 1);
}

body {
  transition: color var(--transition-dur);

  transition-timing-function: var(--transition-timing);
}

/* Dark Mode */
body:has(.switch-input:checked),
.button-bordered:has(.switch-input:checked),
.link-decoration:has(.switch-input:checked) {
  --text-color: rgba(253, 240, 213, 1);
  --background-color: rgba(0, 48, 73, 1);
  /* --button-color: rgb(45, 147, 173); */
  --button-color: rgb(223, 197, 49);
  --highlight-color: rgb(117, 109, 84);
  /* --highlight-color: rgb(18, 17, 17); */

  --aside: rgb(229, 99, 153);
  --aside-alt: rgb(127, 144, 143);

  --switch-color: rgba(253, 240, 213, 1);
}

.switch-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: fit-content;

  /* position: absolute; */
  top: 2vh;
  right: 1.5vw;
}

.switch-label {
  --width: 125px;
  --height: 50px;

  display: block;
  position: relative;

  width: var(--width);

  height: var(--height);
  background-color: var(--switch-color);

  border-radius: 200px;
  box-shadow: inset 0px 5px 15px rgba(0, 0, 0, 0.4),
    inset 0px -5px 15px rgba(255, 255, 255, 0.4);

  transition: transform var(--transition-dur);
  transition-timing-function: var(--transition-timing);
}

.switch-label::after {
  --size: 45px;
  --position: 2.5px;

  content: "";
  width: var(--size);
  height: var(--size);
  position: absolute;
  top: var(--position);
  left: var(--position);

  background-color: linear-gradient(180deg, #ffcc80, #d8860b);
  border-radius: 180px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);

  transition: all var(--transition-dur);
  transition-timing-function: var(--transition-timing);

  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  /* background-image: url("/img/utility/sun-svgrepo-com.svg"); */
  background-image: url("/img/utility/cog-svgrepo-com.svg");
}

.switch-input {
  width: 0;
  height: 0;
  visibility: hidden;
}

.switch-input:checked + .switch-label {
  background-color: var(--text-color);
}

.switch-input:checked + .switch-label::after {
  left: 90%;
  transform: translateX(-100%);
  background-color: linear-gradient(180deg, #777, #3a3a3a);
  /* background-image: url("/img/utility/full-moon-moon-svgrepo-com.svg"); */
  background-image: url("/img/utility/cog-svgrepo-com.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;

  /* Gray background for moon */
  /* background-color: #3a3a3a; */

  transition: var(--transition-dur);
  transition-timing-function: var(--transition-timing);
}

/* Gooey effect */
label:active::after {
  --size: 65px;
  width: var(--size);
}

/* Accessability  */

.switch-sr {
  overflow: hidden;
  /* position: absolute; */
  width: 1px;
  height: 1px;
}

body:has(.switch-input:checked) .switch-sr::before {
  content: "Not ";
}