theme-toggle {
  display: flex;
  width: var(--sizing-svg-base);
  height: var(--sizing-svg-base);
  margin-left: var(--spacing-md);
}

.theme-toggle {
  background: transparent;
  padding: 0;

  & svg {
    cursor: pointer;
  }

  &:hover svg,
  &:focus svg,
  &:focus-within svg,
  &:active svg {
    stroke: var(--accent-color-hover);
  }

  & > .light svg { stroke: var(--sun); }
  & > .dark svg { stroke: var(--moon); }

  & > .light ,
  & > .dark {
    display: none;
  }
}

[data-theme="dark"] {
  & .theme-toggle > .light {
    display: inline;
  }

  & .theme-toggle > .dark {
    display: none;
  }
}

[data-theme="light"] {
  & .theme-toggle > .light {
    display: none;
  }

  & .theme-toggle > .dark {
    display: inline;
  }
}