/**
 * Light/dark theme switcher
 */

.theme-switch-button {
  .theme-switch {
    display: none;

    &:active {
      text-decoration: none;
      color: var(--pst-color-link-hover);
    }

    .fa-lg {
      aspect-ratio: 1 / 1;
    }
  }
}

@each $mode in auto, light, dark {
  html[data-mode="#{$mode}"]
    .theme-switch-button
    .theme-switch[data-mode="#{$mode}"] {
    display: inline; // inline needed for span height to be calculated using inherited font size and line height
  }
}
