// 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 toggle
 *
 * @name base
 * @selector .slds-checkbox_toggle
 * @restrict label
 * @support dev-ready
 * @variant
 */
.slds-checkbox_toggle,
.slds-checkbox--toggle {
  width: fit-content;

  /**
    * @summary Creates a custom styled checkbox
    * @selector .slds-checkbox_faux
    * @restrict .slds-checkbox_toggle span
    */
  .slds-checkbox_faux,
  .slds-checkbox--faux {
    display: block;
    position: relative;
    width: $width-toggle;
    height: $height-toggle;
    border-width: $border-width-thin;
    border-style: solid;
    // @todo consider shared hooks for inputs
    border-color: var(--slds-c-checkbox-toggle-color-border, var(--sds-c-checkbox-toggle-color-border, var(--slds-g-color-neutral-base-60, #{$color-background-toggle})));
    padding: $spacing-xxx-small;
    // @todo consider shared hooks for inputs
    background-color: var(--slds-c-checkbox-toggle-color-background, var(--sds-c-checkbox-toggle-color-background, var(--slds-g-color-neutral-base-60, #{$color-background-toggle})));
    // @todo consider global hook
    border-radius: var(--slds-c-checkbox-toggle-radius-border, var(--sds-c-checkbox-toggle-radius-border, $border-radius-pill));
    box-shadow: var(--slds-c-checkbox-toggle-shadow, var(--sds-c-checkbox-toggle-shadow));
    transition: background-color 0.2s cubic-bezier(0.75, 0, 0.08, 1);

    &:hover,
    &:focus {
      // @todo consider shared hooks for inputs
      /*! @css-var-fallback background-color */
      --slds-c-checkbox-toggle-color-background: var(--slds-c-checkbox-toggle-color-background-hover, var(--sds-c-checkbox-toggle-color-background-hover, var(--slds-g-color-neutral-base-50, #{$color-background-toggle-hover})));

      --slds-c-checkbox-toggle-color-border: var(--slds-c-checkbox-toggle-color-border-hover);
      cursor: pointer;
    }

    &:after {
      content: '';
      position: absolute;
      top: 1px;
      left: 1px;
      width: $square-toggle-slider;
      height: $square-toggle-slider;
      background-color: var(--slds-c-checkbox-toggle-switch-color-background, var(--sds-c-checkbox-toggle-switch-color-background, var(--slds-g-color-neutral-base-100, #{$color-background-alt})));
      // @todo consider global hook
      border-radius: var(--slds-c-checkbox-toggle-radius-border, var(--sds-c-checkbox-toggle-radius-border, $border-radius-pill));
    }
  }

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

    /**
      * @summary Container for faux checkbox element
      * @selector .slds-checkbox_faux_container
      * @restrict .slds-checkbox_toggle span
      */
    + .slds-checkbox_faux_container,
    + .slds-checkbox--faux_container {
      // @todo consider shared hook (or global)
      font-size: $font-size-1;
      // @todo consider shared hook (or global)
      color: var(--slds-g-color-neutral-base-30, #{$color-text-label});

      /**
        * @summary Container for text to show when checkbox is toggle off
        * @selector .slds-checkbox_off
        * @restrict .slds-checkbox_faux_container span
        */
      .slds-checkbox_off,
      .slds-checkbox--off {
        display: block;
      }

      /**
        * @summary Container for text to show when checkbox is toggle on
        * @selector .slds-checkbox_on
        * @restrict .slds-checkbox_faux_container span
        */
      .slds-checkbox_on,
      .slds-checkbox--on {
        display: none;
      }
    }

    &:focus {

      + .slds-checkbox_faux,
      + .slds-checkbox--faux,
      ~ .slds-checkbox_faux,
      ~ .slds-checkbox--faux,
      + .slds-checkbox_faux_container .slds-checkbox_faux,
      + .slds-checkbox--faux_container .slds-checkbox--faux {
        // @todo consider shared hooks for inputs
        /*! @css-var-fallback background-color */
        --slds-c-checkbox-toggle-color-background: var(--slds-c-checkbox-toggle-color-background-focus, var(--sds-c-checkbox-toggle-color-background-focus, var(--slds-g-color-neutral-base-50, #{$color-background-toggle-hover})));

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

    // Checked State with Interactions
    &:checked {

      + .slds-checkbox_faux_container .slds-checkbox_off,
      + .slds-checkbox--faux_container .slds-checkbox--off {
        display: none;
      }

      + .slds-checkbox_faux_container .slds-checkbox_on,
      + .slds-checkbox--faux_container .slds-checkbox--on {
        display: block;
      }

      + .slds-checkbox_faux,
      + .slds-checkbox--faux,
      ~ .slds-checkbox_faux,
      ~ .slds-checkbox--faux,
      + .slds-checkbox_faux_container .slds-checkbox_faux,
      + .slds-checkbox--faux_container .slds-checkbox--faux {
        // @todo consider shared hooks for inputs
        /*! @css-var-fallback border-color */
        --slds-c-checkbox-toggle-color-border: var(--slds-c-checkbox-toggle-color-border-checked, var(--sds-c-checkbox-toggle-color-border-checked, #{$brand-accessible}));
        // @todo consider shared hooks for inputs
        /*! @css-var-fallback background-color */
        --slds-c-checkbox-toggle-color-background: var(--slds-c-checkbox-toggle-color-background-checked, var(--sds-c-checkbox-toggle-color-background-checked, #{$brand-accessible}));

        &:hover,
        &:focus {
          // @todo consider shared hooks for inputs
          /*! @css-var-fallback background-color */
          --slds-c-checkbox-toggle-color-background: var(--slds-c-checkbox-toggle-color-background-checked-hover, var(--sds-c-checkbox-toggle-color-background-checked-hover, #{$brand-accessible-active}));
        }

        &:before {
          content: '';
          position: absolute;
          top: 1px;
          right: 1px;
          width: $square-toggle-slider;
          height: $square-toggle-slider;
          // @todo JB revisit
          background-color:
            var(--slds-c-checkbox-toggle-switch-color-background-checked,
            var(--sds-c-checkbox-toggle-switch-color-background-checked,
            var(--slds-c-checkbox-toggle-switch-color-background,
            var(--sds-c-checkbox-toggle-switch-color-background, $color-background-alt))));
          border-radius: var(--slds-c-checkbox-toggle-radius-border, var(--sds-c-checkbox-toggle-radius-border, $border-radius-pill));
          transition: transform 0.2s cubic-bezier(0.75, 0, 0.08, 1);
        }

        &:after {
          /*! @css-var-fallback background-color */
          --slds-c-checkbox-toggle-switch-color-background: transparent;

          /*! @css-var-fallback border-radius */
          --slds-c-checkbox-toggle-radius-border: 0;
          content: ' ';
          position: absolute;
          top: 0.25rem; // These are arbitrary to create the checkbox
          left: 0.6rem; // like the right positioning above
          height: 0.7rem; // Seems silly to tokenize?
          width: 0.45rem;
          border-bottom-width: $border-width-thick;
          border-bottom-style: solid;
          border-bottom-color: var(--slds-c-checkbox-toggle-mark-color-foreground, var(--sds-c-checkbox-toggle-mark-color-foreground, var(--slds-g-color-neutral-base-100, #{$color-border-toggle-checked})));
          /* stylelint-disable comment-empty-line-before */
          /*! @noflip */
          border-right-width: $border-width-thick;
          /*! @noflip */
          border-right-style: solid;
          /*! @noflip */
          border-right-color: var(--slds-c-checkbox-toggle-mark-color-foreground, var(--sds-c-checkbox-toggle-mark-color-foreground, var(--slds-g-color-neutral-base-100, #{$color-border-toggle-checked})));
          transform: rotate(45deg);
        }
      }

      &:focus {

        + .slds-checkbox_faux,
        + .slds-checkbox--faux,
        ~ .slds-checkbox_faux,
        ~ .slds-checkbox--faux,
        + .slds-checkbox_faux_container .slds-checkbox_faux,
        + .slds-checkbox--faux_container .slds-checkbox--faux {
          // @todo consider shared hooks for inputs
          /*! @css-var-fallback background-color */
          --slds-c-checkbox-toggle-color-background: var(--slds-c-checkbox-toggle-color-background-checked-focus, var(--sds-c-checkbox-toggle-color-background-checked-focus, #{$brand-accessible-active}));
        }
      }
    }

    &[disabled] {

      + .slds-checkbox_faux,
      + .slds-checkbox--faux,
      ~ .slds-checkbox_faux,
      ~ .slds-checkbox--faux,
      + .slds-checkbox_faux_container .slds-checkbox_faux,
      + .slds-checkbox--faux_container .slds-checkbox--faux {
        // @todo consider shared hooks for inputs
        background-color: var(--slds-g-color-neutral-base-80, #{$color-background-toggle-disabled});
        // @todo consider shared hooks for inputs
        border-color: var(--slds-g-color-neutral-base-80, #{$color-background-toggle}); // Prevents checked styles from bleeding through
        pointer-events: none;

        &:after {
          // @todo consider shared hooks for inputs
          background-color: var(--slds-g-color-neutral-base-90, #{$color-background-input-checkbox-disabled});
        }

        &:hover,
        &:focus {
          // @todo consider shared hooks for inputs
          background-color: var(--slds-g-color-neutral-base-80, #{$color-background-toggle-disabled});
          cursor: default;
        }
      }

      &:checked {

        + .slds-checkbox_faux_container .slds-checkbox_faux,
        + .slds-checkbox--faux_container .slds-checkbox--faux {

          &:before {
            // @todo consider shared hooks for inputs
            background-color: var(--slds-g-color-neutral-base-90, #{$color-background-input-checkbox-disabled});
          }

          &:after {
            background-color: transparent;
          }
        }
      }
    }
  }
}