/*---------------------------------------------------------------------------------------------
* 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";

@mixin uicore-inputs-checkbox {

  display: block;
  position: relative;
  font-size: $uicore-font-size;
  line-height: normal;
  cursor: pointer;
  user-select: none;
  color: $buic-foreground-body;
  min-width: 1em;
  min-height: 1.57em;

  &.core-checkbox-no-label {
    display: inline-block;
    min-height: 1em;
  }

  > input {
    position: absolute;
    opacity: 0;
    width: 0;
    cursor: pointer;
  }

  .core-checkbox-label {
    padding-left: $uicore-l;
  }

  .core-checkbox-checkmark,
  .core-checkbox-indeterminate {
    position: absolute;
    top: 2px;
    left: 0;
    height: 1em;
    width: 1em;
    border: 1px solid $buic-foreground-disabled;
    background-color:  $buic-background-control;
    border-radius: $uicore-border-radius;
  }

  &:hover:not(.core-disabled) input ~ .core-checkbox-checkmark,
  &:hover:not(.core-disabled) input ~ .core-checkbox-indeterminate {
    border-color:     $buic-foreground-activehover;
    transition:       all $uicore-speed-fast ease-out;
  }

  & input:checked ~ .core-checkbox-checkmark,
  & input:checked ~ .core-checkbox-indeterminate {
    border-color:     $buic-foreground-muted;
  }

  & input:active ~ .core-checkbox-checkmark,
  & input:active ~ .core-checkbox-indeterminate,
  & input:focus ~ .core-checkbox-checkmark,
  & input:focus ~ .core-checkbox-indeterminate {
    border-color:     $buic-foreground-focus-border;
    box-shadow:       $uicore-inputs-focus-gradient;
  }

  .core-checkbox-checkmark::after,
  .core-checkbox-indeterminate::after {
    content: '';
    position: absolute;
    display: none;
  }

  & input:checked ~ .core-checkbox-checkmark::after,
  & input:checked ~ .core-checkbox-indeterminate::after {
    display: block;
  }

  & .core-checkbox-checkmark::after,
  & .core-checkbox-indeterminate::after {
    border: solid $buic-foreground-primary;
  }

  & input:not(:indeterminate) ~ .core-checkbox-checkmark::after {
    top: 1px;
    left: 4px;
    width: 4px;
    height: 8px;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }

  /* Support for using core-checkbox-indeterminate class */
  & .core-checkbox-indeterminate::after {
    top: 6px;
    left: 3px;
    width: 7px;
    border-width: 0 1px 2px 0;
  }

  /* Support for using checkboxInput.current.indeterminate = true */
  & input:indeterminate ~ .core-checkbox-checkmark::after {
    display: block;
    top: 6px;
    left: 3px;
    width: 7px;
    border-width: 0 1px 2px 0;
  }

  &.core-disabled {
    opacity: $uicore-opacity-disabled;
    cursor: not-allowed;
  }

  &.success {
    color: $buic-foreground-success;
  }

  &.warning {
    color: $buic-foreground-warning;
  }

  &.error {
    color: $buic-foreground-alert;
  }
}