.cd-theme-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;

  & {
    font-weight: 400;
    height: 2.5rem;
    width: 2.5rem;
    flex-grow: 0;
    padding: 0.2rem;
  }
  @media (min-width: 1024px) {
    & {
      width: auto;
    }
  }
  & svg {
    padding: 0.3rem;
    margin: 0;
  }
  &:is(.dark *) svg {
    padding: 0.1rem;
  }
  & .sun-and-moon {
    pointer-events: none;
    display: block;
    height: 100%;
    width: 100%;
  }
  & .sun {
    transform-origin: center;
    transform: scale(1, 1);
    transform: translate3d(0, 0, 0);
    fill: #3f3f46;
    stroke: transparent;
  }
  &:hover .sun {
    fill: #27272a;
  }
  &:focus-visible .sun {
    fill: #27272a;
  }
  @media (prefers-reduced-motion: no-preference) {
    & .sun {
      transition-property: transform;
      transition-timing-function: cubic-bezier(0.5, 1.25, 0.75, 1.25);
      transition-duration: 0.5s;
    }
  }
  & .sun:is(.dark *) {
    transform: scale(1.75, 1).75;
    fill: #e4e4e7;
  }
  &:hover .sun:is(.dark *) {
    fill: #f4f4f5;
  }
  &:focus-visible .sun:is(.dark *) {
    fill: #f4f4f5;
  }
  @media (prefers-reduced-motion: no-preference) {
    & .sun:is(.dark *) {
      transition-timing-function: cubic-bezier(0.25, 0, 0.3, 1);
      transition-duration: 250ms;
    }
  }
  & .sun-beams {
    transform-origin: center;
    stroke: #3f3f46;
    stroke-width: 2;
  }
  &:hover .sun-beams {
    stroke: #27272a;
  }
  &:focus-visible .sun-beams {
    stroke: #27272a;
  }
  @media (prefers-reduced-motion: no-preference) {
    & .sun-beams {
      transition-property: transform, opacity;
      transition-timing-function: cubic-bezier(0.5, 1.5, 0.75, 1.25);
      transition-duration: 400ms;
    }
  }
  & .sun-beams:is(.dark *) {
    transform: translate3d(0, 0, 0);
    transform: rotate(-25deg);
    stroke: #e4e4e7;
    opacity: 0;
  }
  &:hover .sun-beams:is(.dark *) {
    stroke: #f4f4f5;
  }
  &:focus-visible .sun-beams:is(.dark *) {
    stroke: #f4f4f5;
  }
  @media (prefers-reduced-motion: no-preference) {
    & .sun-beams:is(.dark *) {
      transition-duration: 150ms;
    }
  }
  & .moon {
    transform-origin: center;
    fill: #52525b;
  }
  &:hover .moon {
    fill: #71717a;
  }
  & .moon circle {
    transform: translate3d(0, 0, 0);
  }
  @media (prefers-reduced-motion: no-preference) {
    & .moon circle {
      transition-property: transform;
      transition-timing-function: cubic-bezier(0, 0, 0, 1);
      transition-duration: 0.3s;
    }
  }
  & .moon circle:is(.dark *) {
    transform: translateX(-7px);
  }
  @media (prefers-reduced-motion: no-preference) {
    & .moon circle:is(.dark *) {
      transition-delay: 0.3s;
    }
  }
  & .light-text,
  & .dark-text  {
    padding: 0.5rem;
    padding-left: 0;
    display: none;
    white-space: nowrap;
    font-weight: bold;
    text-align: left;
  }
  @media (min-width: 1024px) {
    & .light-text {
      display: block;
    }
    & .light-text:is(.dark *) {
      display: none;
    }
    & .dark-text:is(.dark *) {
      display: block;
    }
  }
}