/* light mode */
.light > *{
    background-color: var(--background-color) !important;
    color: var(--text-color) !important;
}

/* dark mode */
.dark {
    --background-color: var(--background-color-dark) !important;
    --secondary-background-color: var(--secondary-background-color-dark) !important;
    --text-color: var(--text-color-dark) !important;
    --text-secondary-color: var(--text-secondary-color-dark) !important;
    --primary-color: var(--primary-color-dark);
    --secondary-color: var(--secondary-color-dark);
}

.text-secondary {
    color: var(--text-secondary-color) !important;
}

#theme-toggle:focus {
    outline: 0;
}

#theme-toggle svg {
    height: 18px;
}

button#theme-toggle {
    border: none;
    font-size: 26px;
    margin: auto 4px;
}

body.dark #moon {
    vertical-align: middle;
    display: none;
}

body:not(.dark) #sun {
    display: none;
}

body *::selection {
    color: var(--text-color) !important;
    background-color: var(--primary-color) !important;
}

/* Base link styles */
a {
  text-decoration: none;
  color: var(--text-color) !important;
  position: relative;
  display: inline-block;
  font-weight: 600;
  padding-bottom: 4px;
}

/* Remove decoration for all link states */
a:link,
a:visited,
a:hover,
a:active {
  text-decoration: none;
  font-weight: 600;
}

/* Exclude buttons and logos */
a:not(.btn, .logo-dark a, .logo-light a)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='xMidYMid slice'%3E%3Cpath d='M0,5 C8,1 12,9 20,5 S32,1 40,5 S52,9 60,5 S72,1 80,5 S92,9 100,5 S112,1 120,5' stroke='%23007bff' stroke-width='2.5' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 120px 10px;
  background-position: 0 0;
  opacity: 0; /* Set opacity to 0 initially */
  transition: opacity 0.2s ease; /* Fade in smoothly */
}

/* Show and fade in the line */
a:not(.btn, .logo-dark a, .logo-light a):hover::after {
  opacity: 1; /* Fade in the wavy line */
  animation: moveWave 2s linear infinite;
  animation-delay: 0.1s;
}

@keyframes moveWave {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -120px 0;
  }
}

/* Logo styles - no animation */
.logo-dark a,
.logo-light a {
  text-decoration: none;
  color: var(--text-color) !important;
  position: relative;
  display: inline-block;
}