.funkwhale {
  &.toggle {
    background-color: var(--fw-bg-color);

    @include light-theme {
      --fw-bg-color: var(--fw-gray-500);

      &::before {
        background: var(--fw-red-010);
      }

      &:hover {
        --fw-bg-color: var(--fw-gray-300);
      }

      &.is-active {
        --fw-bg-color: var(--fw-blue-100);

        &:hover {
          --fw-bg-color: var(--fw-blue-400);
        }

        &::before {
          background: var(--fw-blue-010);
        }
      }
    }

    @include dark-theme {
      --fw-bg-color: var(--fw-gray-600);

      &::before {
        background: var(--fw-red-010);
      }

      &:hover {
        --fw-bg-color: var(--fw-gray-700);
      }

      &.is-active {
        --fw-bg-color: var(--fw-blue-400);

        &:hover {
          --fw-bg-color: var(--fw-blue-700);
        }

        &::before {
          background: var(--fw-blue-010);
        }
      }
    }

    position: relative;
    border-radius: 100vw;
    overflow: hidden;
    height: 20px;
    aspect-ratio: 2;

    > input {
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      cursor: pointer;
    }

    &::before {
      display: block;
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      height: calc(100% - 4px);
      aspect-ratio: 1;
      border-radius: 50%;
      transition: transform .2s ease;
    }

    &.is-big {
      height: 28px;
    }

    &.is-active {
      &::before {
        transform: translateX(calc(100% + 4px));
      }
    }

    &[disabled] {
      opacity: 0;
      pointer-events: none;
    }
  }
}
