//////////////////////////////////////////////////////////////////////////////////////////
//   _  _ ____ _  _ ___  ____                                                           //
//   |_/  |__| |\ | |  \ |  |    This file belongs to Kando, the cross-platform         //
//   | \_ |  | | \| |__/ |__|    pie menu. Read more on github.com/kando-menu/kando     //
//                                                                                      //
//////////////////////////////////////////////////////////////////////////////////////////

// SPDX-FileCopyrightText: Simon Schneegans <code@simonschneegans.de>
// SPDX-License-Identifier: MIT

@use '../../variables.scss' as *;

// Toggle switch style
.checkbox {
  appearance: none;
  width: 3em;
  height: 1.6em;
  background: $widget-normal;
  border-radius: 0.8em;
  position: relative;
  transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.08) inset;
  margin: 0;

  &::before {
    content: '';
    position: absolute;
    left: 0.2em;
    top: 0.2em;
    width: 1.2em;
    height: 1.2em;
    background: $window-background;
    border-radius: 50%;
    box-shadow: 0 0.05em 0.2em rgba(0, 0, 0, 0.1);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
  }

  &:checked {
    background: $text-link;
  }

  &:checked::before {
    transform: translateX(1.4em);
    background: $window-background;
  }

  &:hover {
    background: $widget-normal-hover;
  }

  &:checked:hover {
    background: $text-link-hover;
  }

  &:active::before {
    box-shadow: 0 0.1em 0.4em rgba(0, 0, 0, 0.18);
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}
