// 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

/**
 * @summary Initializes checkbox add button
 *
 * @name base
 * @selector .slds-checkbox_add-button
 * @restrict div
 * @support dev-ready
 * @variant
 */
@include deprecate("4.0.0", "Use slds-checkbox-button instead") {

  .slds-checkbox_add-button,
  .slds-checkbox--add-button {
    /**
      * @summary Creates a custom styled checkbox
      * @selector .slds-checkbox_faux
      * @restrict .slds-checkbox_add-button label
    */
    .slds-checkbox_faux,
    .slds-checkbox--faux {
      @include square($square-icon-medium-boundary);
      position: relative;
      display: inline-block;
      border: $border-width-thin solid var(--slds-g-color-border-base-4, #{$color-border-button-default});
      border-radius: $border-radius-medium;
      background-color: var(--slds-g-color-neutral-base-100, #{$color-background-input});
      cursor: pointer;

      &:before,
      &:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: rem(14px);
        width: rem(2px);
        margin: auto;
        background: $brand-accessible;
      }

      &:after {
        width: rem(14px);
        height: rem(2px);
      }

      &:hover:not([disabled]),
      &:focus:not([disabled]) {
        border: $border-width-thin solid var(--slds-g-color-border-base-4, #{$color-border-button-default});
        background-color: var(--slds-g-color-neutral-base-95, #{$color-background-button-default-hover});
      }

      &:active {
        background-color: var(--slds-g-color-neutral-base-95, #{$color-background-button-default-active});
      }
    }

    [type="checkbox"]:checked {

      ~ .slds-checkbox_faux,
      ~ .slds-checkbox--faux,
      + .slds-checkbox_faux,
      + .slds-checkbox--faux {
        border-color: transparent;
        background: var(--slds-g-color-brand-base-30, #{$color-brand-darker});

        &:before,
        &:after {
          background: var(--slds-g-color-neutral-base-100, #{$color-background-alt});
        }

        &:before {
          left: rem(5px);
          width: rem(2px);
          height: rem(16px);
          transform: rotate(40deg);
        }

        &:after {
          top: rem(5px);
          left: rem(-10px);
          width: rem(9px);
          height: rem(2px);
          transform: rotate(40deg);
        }
      }
    }

    [type="checkbox"]:focus {

      ~ .slds-checkbox_faux,
      ~ .slds-checkbox--faux,
      + .slds-checkbox_faux,
      + .slds-checkbox--faux {
        box-shadow: var(--slds-g-shadow-outset-focus-1, #{$shadow-button-focus});
        border: none;
      }
    }

    [type="checkbox"][disabled] {

      ~ .slds-checkbox_faux,
      ~ .slds-checkbox--faux,
      + .slds-checkbox_faux,
      + .slds-checkbox--faux {
        background-color: var(--slds-g-color-neutral-base-95, #{$color-background-button-brand-disabled});
        border-color: var(--slds-g-color-neutral-base-80, #{$color-border-button-brand-disabled});
        color: var(--slds-g-color-neutral-base-100, #{$color-text-button-brand-disabled});
        cursor: default;

        &:before,
        &:after {
          background: var(--slds-g-color-neutral-base-60, #{$color-gray-8});
        }
      }
    }

    [type="checkbox"][disabled]:checked {

      ~ .slds-checkbox_faux,
      + .slds-checkbox_faux {
        background-color: var(--slds-g-color-neutral-base-100, #{$color-background-alt});
      }
    }
  }
}