:root {
  --dark-mode-toggle-swing-transition: 0.5s ease-in-out;
  --dark-mode-toggle-size: 40px;
  --dark-mode-toggle-sun-size: 16px;
  --dark-mode-toggle-sun-rotation-offset: 40px;
  --dark-mode-toggle-sun-offset: calc(
    (var(--dark-mode-toggle-size) - var(--dark-mode-toggle-sun-size)) / 2
  );
  /* --dark-mode-toggle-offset: 100px; */
  --dark-mode-toggle-offset: 20px;

  --standard-theme-transition: 0.4s ease-in-out;
  --dark-bg: hsl(0, 0%, 6%);
  --dark-input-bg: hsl(0, 0%, 10%);
}

/* #region TOGGLE BUTTON */

div#darkModeToggle {
  position: fixed;
  width: var(--dark-mode-toggle-size);
  height: var(--dark-mode-toggle-size);
  bottom: var(--dark-mode-toggle-offset);
  right: var(--dark-mode-toggle-offset);
  cursor: pointer;
  border-radius: 50%;
  background-color: skyblue;
  overflow: hidden;
  transition: background-color var(--dark-mode-toggle-swing-transition),
    box-shadow var(--dark-mode-toggle-swing-transition);
}

body.dark div#darkModeToggle {
  background-color: midnightblue;
}

div#darkModeToggle::after {
  content: '';
  position: absolute;
  width: var(--dark-mode-toggle-sun-size);
  height: var(--dark-mode-toggle-sun-size);
  top: calc(
    var(--dark-mode-toggle-sun-rotation-offset) +
      var(--dark-mode-toggle-sun-offset)
  );
  left: var(--dark-mode-toggle-sun-offset);
  background-color: yellow;
  border-radius: 50%;
  transform: translateY(calc(-1 * var(--dark-mode-toggle-sun-rotation-offset)));
  transition: rotate var(--dark-mode-toggle-swing-transition),
    box-shadow var(--dark-mode-toggle-swing-transition);
}

div#darkModeToggle:hover::after {
  box-shadow: 0 0 10px 3px yellow;
}

div#darkModeToggle:hover::before {
  box-shadow: 0 0 10px 3px grey;
}

div#darkModeToggle::before {
  content: '';
  position: absolute;
  width: var(--dark-mode-toggle-sun-size);
  height: var(--dark-mode-toggle-sun-size);
  top: calc(
    var(--dark-mode-toggle-sun-rotation-offset) +
      var(--dark-mode-toggle-sun-offset)
  );
  left: var(--dark-mode-toggle-sun-offset);
  background-color: lightgrey;
  border-radius: 50%;
  transform: translateX(var(--dark-mode-toggle-sun-rotation-offset));
  transition: rotate var(--dark-mode-toggle-swing-transition),
    box-shadow var(--dark-mode-toggle-swing-transition);
}

div#darkModeToggle::before::before {
  content: '';
  position: absolute;
  width: var(--dark-mode-toggle-sun-size);
  height: var(--dark-mode-toggle-sun-size);
  top: 0;
  left: 0;
  background-color: lime;
  border-radius: 50%;
}

body.dark div#darkModeToggle::after,
body.dark div#darkModeToggle::before {
  rotate: -90deg;
}

/* #endregion */

/* #region DARK MODE */

body {
  transition: background-color var(--standard-theme-transition),
    color var(--standard-theme-transition);
}

input,
select,
table {
  transition: all var(--standard-theme-transition);
}

body input:focus {
  transition: background-color var(--standard-theme-transition);
}

body a {
  transition: color var(--standard-theme-transition);
}

body .form-control {
  transition: background-color var(--standard-theme-transition),
    color var(--standard-theme-transition);
}

body.dark {
  background-color: var(--dark-bg);
  color: white;
}

body.dark input,
body.dark select {
  background-color: var(--dark-input-bg);
}

body.dark input:focus {
  background-color: var(--dark-input-bg) !important;
}

body.dark a {
  color: cornflowerblue;
}

body.dark .form-control {
  color: white;
  background-color: var(--dark-input-bg);
}

body.dark table {
  border-color: dimgray;
}

/* #endregion */