pico/docs/scss/components/_theme-switcher.scss

/**
 * Docs: Theme switcher
 */

.switcher {
  position: fixed;
  right: calc(var(--spacing) / 2);
  bottom: var(--spacing);
  width: auto;
  margin-bottom: 0;
  padding: .75rem;
  border-radius: 2rem;
  box-shadow: var(--card-box-shadow);
  line-height: 1;
  text-align: right;

  &::after {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 0.15rem solid currentColor;
    border-radius: 50%;
    background: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);
    vertical-align: bottom;
    content: '';
    transition: transform var(--transition);
  }

  i {
    display: inline-block;
    max-width: 0;
    padding: 0;
    overflow: hidden;
    font-size: .875rem;
    font-style: normal;
    white-space: nowrap;
  }

  &:hover,
  &:focus {
    max-width: 100%;
    transition:
      background-color var(--transition),
      border-color var(--transition),
      color var(--transition),
      box-shadow var(--transition);
  }

  &:hover {
    &::after {
      transform: rotate(180deg);
    }

    i {
      max-width: 100%;
      padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4);
      transition: max-width var(--transition),
                  padding var(--transition);
    }
  }

  &:focus {
    box-shadow: var(--card-box-shadow), 0 0 0 0.2rem var(--secondary-focus);
  }

  @media (min-width: map-get($breakpoints, "sm")) {
    right: var(--spacing);
  }
}