/** @component checkbox */

@include exports('md-checkbox') {
  .#{$checkbox__class}-group {
    @include vr-spacing(mb, 1.5);

    &:last-child {
      margin-bottom: 0;
    }
  }

  .#{$checkbox__class} {
    @include checkbox-color(
      $border-color: $input__border-color,
      $border-color-css-var: --md-input-outline-color,
      $background-color: $input__background,
      $background-color-css-var: --md-input-background-color,
      $background-color--disabled: $form-control__background,
      $background-color--disabled-css-var: --md-input-outline-color,
      $background-color--hover: $input__background--hover,
      $background-color--hover-css-var: --md-input-background-hover,
      $background-color--checked: $form-control__background--checked,
      $background-color--checked-css-var: --md-input-background-theme-color,
      $background-color--checked-hover: $form-control__background--checked-hover,
      $background-color--checked-hover-css-var: --md-input-background-theme-hover,
      $label-color: $form-control__label,
      $label-color-css-var: --md-input-text-primary
    );

    .#{$checkbox__class}__input {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      border: 0;

      &:checked,
      &:indeterminate,
      &.indeterminate {
        + .#{$checkbox__class}__label {
          &:before {
            color: $form-control__content;
            cursor: pointer;
          }
        }
      }

      &:disabled,
      &.disabled {
        + .#{$checkbox__class}__label {
          cursor: default;
          opacity: $form-control__opacity--disabled;

          &:before {
            cursor: default;
          }
        }
      }

      &:indeterminate,
      &.indeterminate {
        + .#{$checkbox__class}__label {
          &:before {
            @include icon-minus_12;
          }
        }
      }
    }

    .#{$checkbox__class}__label {
      display: flex;
      line-height: $checkbox__size;
      font-size: $checkbox__label-size;
      cursor: pointer;

      &:before {
        @include flex();
        @include border-radius(4px);
        @include icon-check_12;

        flex-shrink: 0;
        width: $checkbox__size;
        height: $checkbox__size;
        margin-right: rem-calc(12);
        font-family: $icon-font-name;
        font-size: $checkbox__icon-size;
        font-style: normal;
        line-height: $checkbox__icon-size;
        color: transparent;
        border: none;
        transition: 300ms ease-in-out all;
      }
    }

    &.#{$prefix}-input-container {
      @include vr-spacing(mb, 0.5);

      display: flex;
      flex-direction: column;
    }

    .#{$checkbox__class}-horizontal {
      display: inline-block;
      margin-right: 20px;
    }

    .form-horizontal .#{$checkbox__class}-horizontal {
      padding-top: 6px;
    }

    .#{$prefix}-input__help-text {
      @include input__help-text();
      @include vr-spacing(pl, 2);
    }
  }
  // Dark
  .#{$dark-class} {
    .#{$checkbox__class} {
      @include checkbox-color(
        $border-color: $input__border-color--dark,
        $background-color: $input__background,
        $background-color--disabled: $form-control__background--dark,
        $background-color--hover: $input__background--hover--dark,
        $background-color--checked: $form-control__background--checked--dark,
        $background-color--checked-hover: $form-control__background--checked-hover--dark,
        $label-color: $form-control__label--dark
      );
    }
  }
  // Filled
  .#{$input__class--filled},
  .#{$client-class} {
    .#{$checkbox__class} {
      @include checkbox-color(
        $border-color: $input__border-color--filled,
        $background-color: $form-control__background,
        $background-color--disabled: $form-control__background,
        $background-color--hover: $form-control__background--hover,
        $background-color--checked: $form-control__background--checked,
        $background-color--checked-hover: $form-control__background--checked-hover,
        $label-color: $form-control__label
      );
    }
  }
  // Filled - Dark
  .#{$client-class}.#{$dark-class},
  .#{$client-class} .#{$dark-class},
  .#{$dark-class} .#{$input__class--filled},
  .#{$dark-class}.#{$input__class--filled} {
    .#{$checkbox__class} {
      @include checkbox-color(
        $border-color: $input__border-color--filled,
        $background-color: $form-control__background--dark,
        $background-color--disabled: $form-control__background--dark,
        $background-color--hover: $form-control__background--hover--dark,
        $background-color--checked: $form-control__background--checked--dark,
        $background-color--checked-hover: $form-control__background--checked-hover--dark,
        $label-color: $form-control__label--dark
      );
    }
  }
}