@import url("variables.css");

/* Theme overriding */
body.light-mode {
  --page-bg: var(--light-page-bg);
  --gradient-bg: var(--light-gradient-bg);
  --text-color: var(--light-text-color);
  --text-white: var(--light-text-color);
  --accent-color: var(--light-accent-color);
  --accent-lime: var(--light-theme-accent);
  --nav-bg-scroll: var(--light-nav-bg-scroll);
  --nav-dropshadow: var(--light-nav-dropshadow);
  --burger-bg: var(--light-burger-bg);
  --link-underline-img: url("../img/link_underline_light.svg");
  --border-bottom: var(--light-border-bottom);
  --border-top: var(--light-border-top);
  --sweeper-color: var(--light-sweeper-color);
  --card-bg: var(--light-card-bg);
  --logo-lime: var(--light-logo);
}

#theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  width: 22px;
  height: 22px;
}

#theme-toggle img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.2s ease;
}

.icon-light {
  opacity: 1;
}

.icon-dark {
  opacity: 0;
}

body.light-mode .icon-light {
  opacity: 0;
}

body.light-mode .icon-dark {
  opacity: 1;
}