// Lightning Design System 2.29.1
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license

@import 'deprecate';

/**
 * @summary Initializes checkbox
 *
 * @name base
 * @selector .slds-checkbox
 * @restrict span, label, div
 * @required
 * @support dev-ready
 * @variant
 */
.slds-checkbox {
  display: inline-block;
  position: relative;

  /**
   * @summary Creates a custom styled checkbox
   * @selector .slds-checkbox_faux
   * @restrict .slds-checkbox span
   */
  .slds-checkbox_faux,
  .slds-checkbox--faux {
    @include square($square-icon-medium-content);
    display: inline-block;
    position: relative;
    flex-shrink: 0;
    vertical-align: middle;
    // @todo consider shared hooks for inputs
    border-radius: var(--slds-c-checkbox-radius-border, var(--sds-c-checkbox-radius-border, $border-radius-small));
    // @todo consider shared hooks for inputs
    border-width: $border-width-thin;
    border-style: solid;
    // @todo consider shared hooks for inputs
    border-color: var(--slds-c-checkbox-color-border,
      var(--sds-c-checkbox-color-border, var(--slds-g-color-border-base-4, #{$color-border-input})));
    // @todo consider shared hooks for inputs
    background-color: var(--slds-c-checkbox-color-background, var(--sds-c-checkbox-color-background, var(--slds-g-color-neutral-base-100, #{$color-background-input})));
    box-shadow: var(--slds-c-checkbox-shadow, var(--sds-c-checkbox-shadow));
    transition: border $duration-quickly linear, background-color $duration-quickly linear;
  }

  /**
   * @summary Container for faux checkbox, text, and slds-form-element__label
   * @selector .slds-checkbox__label
   * @restrict .slds-checkbox label
   */
  .slds-checkbox__label {

    // When slds-form-element__label is inline with slds-checkbox_faux, display as inline
    .slds-form-element__label {
      display: inline;
      vertical-align: middle;
      font-size: $font-size-3;
    }
  }

  [type="checkbox"] {
    @include square(1px);
    border: 0;
    clip: rect(0 0 0 0);
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    pointer-events: auto;

    &:checked + .slds-checkbox_faux,
    &:checked + .slds-checkbox--faux,
    &:checked ~ .slds-checkbox_faux,
    &:checked ~ .slds-checkbox--faux,
    &:checked + .slds-checkbox__label .slds-checkbox_faux,
    &:checked + .slds-checkbox__label .slds-checkbox--faux {
      // @todo consider shared hooks
      --slds-c-checkbox-color-border: var(--slds-c-checkbox-color-border-checked, var(--sds-c-checkbox-color-border-checked));
      --slds-c-checkbox-color-background: var(--slds-c-checkbox-color-background-checked, var(--sds-c-checkbox-color-background-checked));

      &:after {
        display: block;
        content: '';
        height: ($square-icon-x-small-content * 0.5);
        width: $square-icon-x-small-content;
        position: absolute;
        top: 50%;
        /* stylelint-disable comment-empty-line-before */
        /*! @noflip */
        left: 50%;
        transform: translate3d(-50%, -50%, 0) rotate(-45deg);
        border-bottom: $border-width-thick solid var(--slds-c-checkbox-mark-color-foreground, var(--sds-c-checkbox-mark-color-foreground, var(--slds-s-mark-color-foreground-checked, $brand-accessible)));

        /*! @noflip */
        border-left: $border-width-thick solid var(--slds-c-checkbox-mark-color-foreground, var(--sds-c-checkbox-mark-color-foreground, var(--slds-s-mark-color-foreground-checked, $brand-accessible)));
      }
    }

    &:focus {

      + .slds-checkbox_faux,
      + .slds-checkbox--faux,
      ~ .slds-checkbox_faux,
      ~ .slds-checkbox--faux,
      + .slds-checkbox__label .slds-checkbox_faux,
      + .slds-checkbox__label .slds-checkbox--faux {
        // @todo consider shared hooks for inputs

        outline: 0;
        outline-offset: 0px;
        /*! @css-var-fallback border-color */
        --slds-c-checkbox-color-border: var(--slds-c-checkbox-color-border-focus, var(--sds-c-checkbox-color-border-focus));

        /*! @css-var-fallback box-shadow */
        --slds-c-checkbox-shadow: var(--slds-c-checkbox-shadow-focus, var(--sds-c-checkbox-shadow-focus, var(--slds-g-shadow-outset-focus-1, #{$shadow-button-focus})));
      }

      &:checked > .slds-checkbox_faux,
      &:checked > .slds-checkbox--faux,
      &:checked ~ .slds-checkbox_faux,
      &:checked ~ .slds-checkbox--faux,
      &:checked + .slds-checkbox__label .slds-checkbox_faux,
      &:checked + .slds-checkbox__label .slds-checkbox--faux {
        // @todo consider shared hooks for inputs
        /*! @css-var-fallback border-color */
        --slds-c-checkbox-color-border: var(--slds-c-checkbox-color-border-focus, var(--sds-c-checkbox-color-border-focus));
      }
    }

    &:focus-visible {

      + .slds-checkbox_faux,
      + .slds-checkbox--faux,
      ~ .slds-checkbox_faux,
      ~ .slds-checkbox--faux,
      + .slds-checkbox__label .slds-checkbox_faux,
      + .slds-checkbox__label .slds-checkbox--faux {
        // @todo consider shared hooks for inputs
        outline: 0;
        outline-offset: 0px;
      }
    }

    &:indeterminate + .slds-checkbox_faux,
    &:indeterminate + .slds-checkbox--faux,
    &:indeterminate ~ .slds-checkbox_faux,
    &:indeterminate ~ .slds-checkbox--faux,
    &:indeterminate + .slds-checkbox__label .slds-checkbox_faux,
    &:indeterminate + .slds-checkbox__label .slds-checkbox--faux {
      --slds-c-checkbox-color-border: var(--slds-c-checkbox-color-border-checked, var(--sds-c-checkbox-color-border-checked));
      --slds-c-checkbox-color-background: var(--slds-c-checkbox-color-background-checked, var(--sds-c-checkbox-color-background-checked));
    }

    &:indeterminate + .slds-checkbox_faux:after,
    &:indeterminate + .slds-checkbox--faux:after,
    &:indeterminate ~ .slds-checkbox_faux:after,
    &:indeterminate ~ .slds-checkbox--faux:after,
    &:indeterminate + .slds-checkbox__label .slds-checkbox_faux:after,
    &:indeterminate + .slds-checkbox__label .slds-checkbox--faux:after {
      content: '';
      display: block;
      position: absolute;
      top: 50%;

      /*! @noflip */
      left: 50%;
      width: $square-icon-x-small-content;
      height: 2px;
      border: 0;
      transform: translate3d(-50%, -50%, 0);
      background: var(--slds-c-checkbox-mark-color-foreground, var(--sds-c-checkbox-mark-color-foreground, var(--slds-s-mark-color-foreground-checked, $brand-accessible)));
    }

    &[disabled] {

      + .slds-checkbox_faux,
      + .slds-checkbox--faux,
      ~ .slds-checkbox_faux,
      ~ .slds-checkbox--faux,
      + .slds-checkbox__label .slds-checkbox_faux,
      + .slds-checkbox__label .slds-checkbox--faux {
        // @todo consider shared hooks for inputs
        border-color: var(--slds-g-color-border-base-1, #{$color-border-input-disabled});
        // @todo consider shared hooks for inputs
        background-color: var(--slds-g-color-neutral-base-95, #{$color-background-input-disabled});

        &:after {
          // @todo consider shared hooks for inputs
          border-color: var(--slds-g-color-neutral-base-60, #{$color-gray-8});
        }
      }
    }
  }
}

.slds-has-error .slds-checkbox [type="checkbox"] {

  + .slds-checkbox_faux,
  + .slds-checkbox--faux,
  ~ .slds-checkbox_faux,
  ~ .slds-checkbox--faux,
  + .slds-checkbox__label .slds-checkbox_faux,
  + .slds-checkbox__label .slds-checkbox--faux {
    border-color: var(--slds-g-color-error-base-40, #{$color-border-error});
    border-width: $border-width-thick;
  }

  &:checked + .slds-checkbox_faux,
  &:checked + .slds-checkbox--faux,
  &:checked ~ .slds-checkbox_faux,
  &:checked ~ .slds-checkbox--faux,
  &:checked + .slds-checkbox__label .slds-checkbox_faux,
  &:checked + .slds-checkbox__label .slds-checkbox--faux {
    border-color: var(--slds-g-color-error-base-40, #{$color-border-error});

    &:after {
      border-color: var(--slds-g-color-error-base-40, #{$color-background-error});
    }
  }
}

.slds-form-element .slds-checkbox [type="checkbox"] + .slds-checkbox_faux,
.slds-form-element .slds-checkbox [type="checkbox"] + .slds-checkbox--faux,
.slds-form-element .slds-checkbox [type="checkbox"] ~ .slds-checkbox_faux,
.slds-form-element .slds-checkbox [type="checkbox"] ~ .slds-checkbox--faux,
.slds-form-element .slds-checkbox [type="checkbox"] + .slds-checkbox__label .slds-checkbox_faux,
.slds-form-element .slds-checkbox [type="checkbox"] + .slds-checkbox__label .slds-checkbox--faux {
  margin-right: $spacing-x-small;

  @include rtl() {
    /*! @noflip */
    margin-right: 0;

    /*! @noflip */
    margin-left: $spacing-x-small;
  }
}