$lui-checkbox-box-border-color: $grey-700 !default;
$lui-checkbox-checked-color: $primary-1-color !default;
$lui-checkbox-disabled-color: $grey-400 !default;
$lui-checkbox-success-color: $success !default;
$lui-checkbox-required-color: $accent-1-color !default;
$lui-checkbox-size: 24px;

.lui-checkbox {
  .lui-checkbox-icon {

    height: $lui-checkbox-size;
    width: $lui-checkbox-size;
    margin-right: $desktop-gutter-less;

    .lui-checkbox-check {
      position: absolute;
      opacity: 0;
      transform: scale(0);
      transform-origin: 50% 50%;

      transition:
        opacity 450ms $ease-out-function 0ms,
        transform 0ms $ease-out-function 450ms;

      * { fill: $lui-checkbox-checked-color; }
    }

    .lui-checkbox-box {
      position: absolute;
      * {
        fill: $lui-checkbox-box-border-color;
        @include ease-out();
      }
    }
  }

  &.lui-is-switched {
    .lui-checkbox-icon {
      .lui-checkbox-check {
        @include ease-out();
        opacity: 1;
        transform: scale(1);
        transform-origin: 50% 50%;

        transition:
          opacity 0ms $ease-out-function 0ms,
          transform 800ms $ease-out-function 0ms;
      }
      .lui-checkbox-box {
        @include ease-out();
        * { fill: $lui-checkbox-checked-color; }
      }
    }
  }

  &.lui-is-disabled {
    .lui-checkbox-icon {
      .lui-checkbox-check,
      .lui-checkbox-box {
        * { fill: $lui-checkbox-disabled-color; }
      }
    }
  }

  &.lui-is-success {
    .lui-checkbox-icon {
      .lui-checkbox-check {
        * { fill: $lui-checkbox-success-color; }
      }
    }
  }
  


  &.lui-is-required {
    .lui-checkbox-icon {
      .lui-checkbox-box {
        * { fill: $lui-checkbox-required-color; }
      }
    }
  }
}