/** @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: --mds-color-theme-outline-input-normal,
      $background-color: $input__background,
      $background-color-css-var: --mds-color-theme-control-inactive-normal,
      $background-color--disabled: $form-control__background,
      $background-color--disabled-css-var: --mds-color-theme-control-inactive-hover,
      $background-color--hover: $input__background--hover,
      $background-color--hover-css-var: --mds-color-theme-control-inactive-hover,
      $background-color--checked: $form-control__background--checked,
      $background-color--checked-css-var: --mds-color-theme-control-active-normal,
      $background-color--checked-hover: $form-control__background--checked-hover,
      $background-color--checked-hover-css-var: --mds-color-theme-control-active-hover,
      $label-color: $form-control__label,
      $label-color-css-var: --mds-color-theme-text-primary-normal
    );

    .#{$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;
            color: var(--mds-color-theme-common-inverted-text-primary-normal);
            cursor: pointer;
          }
        }

        &:disabled {
          + .#{$checkbox__class}__label {
            color: var(--mds-color-theme-text-primary-disabled);

            &:before {
              color: var(--mds-color-theme-text-primary-normal);
            }
          }
        }

      }

      &:disabled,
      &.disabled {
        + .#{$checkbox__class}__label {
          cursor: default;
          color: var(--mds-color-theme-text-primary-disabled) !important;

          &:before {
            cursor: default;
          }
        }
        ~ .#{$prefix}-input__help-text {
          color: var(--mds-color-theme-text-primary-disabled) !important;
        }
      }

      &: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(2px);
        @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);
    }
  }
}