/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
@import "../style/index";
@import "../button/button";

$toggle-height-small: $uicore-font-size * 1.5;
$toggle-width-small:  $toggle-height-small * 2;
$toggle-padding:      2;

$toggle-height-large: 32px;
$toggle-width-large:  $toggle-height-large * 2;

$toggle-handle-small: $toggle-height-small - ($toggle-padding * 2);
$toggle-handle-large: $toggle-height-large - ($toggle-padding * 2);

.core-toggle {
  width:  $toggle-width-small;
  height: $toggle-height-small;
  position: relative;
  display: inline-block;
  border-radius: 3px;
  color: $uicore-white;
  vertical-align: middle;
  overflow: hidden;
  font-size: $uicore-font-size;
  cursor: pointer;
  outline:        none;
  margin:         2px;
  box-shadow:     $buic-inputs-boxshadow 0px 1px 1px inset;
  transition:     all 0.15s ease-in-out;

  &:active,
  &:focus-within {
    @include uicore-buttons-button-focused;
  }
}

.core-toggle-large {
  height:         $toggle-height-large;
  width:          $toggle-width-large;

  .core-toggle-handle {
    min-width:    $toggle-handle-large;
    min-height:   $toggle-handle-large;
  }
}

.core-toggle-input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.core-toggle-background {
  position:       relative;
  display:        block;
  height:         inherit;
  background:     $uicore-gray-6;
  color:          $uicore-white;
  border-radius:  inherit;
  transition:     box-shadow 0.15s ease-in-out;
}

/* Blue (default) */
.core-toggle-input:checked~.core-toggle-background {
  background: $buic-accessory-primary;
}

/* Green (primary) */
.core-toggle-primary> .core-toggle-input:checked~.core-toggle-background {
  background: $buic-accessory-success;
}

.core-toggle-handle {
  position: absolute;
  background: $buic-accessory-hollow;
  border-radius: 3px;
  box-sizing:     border-box;
  border:         1px solid $buic-accessory-hollow;
  transition:     border-color 0.15s ease-in-out;

  min-width:  $toggle-handle-small;
  min-height: $toggle-handle-small;

  &.core-toggling {
    transition: transform 0.2s ease-out;
  }
}

/* Disabled toggle */
.core-toggle.uicore-disabled {
  .core-toggle-input:checked~.core-toggle-background {
    background: $buic-foreground-disabled;
  }

  opacity: $uicore-opacity-disabled;
  cursor: not-allowed;
}

.core-toggle.core-toggle-rounded .core-toggle-handle {
  border-radius: 50%;
}

.core-toggle-checkmark {
  position: absolute;
  left: 0px;
  top: 50%;
  opacity: 0;
  transform: translateY(-50%);

  &.core-toggling {
    transition: left .2s ease-out;
  }
}

.core-toggle-input:checked~.core-toggle-checkmark.core-visible {
  opacity: 1;
  color: $uicore-white;
  font-size: inherit;
  left: 15%;
}

.core-toggle-input {
  &:focus, &:active {

    ~.core-toggle-background {
      box-shadow:     $uicore-button-focus-boxshadow;
    }
  }
}