@import '../_variables.scss';
@import '../_mixins.scss';

@include exports('forms.checkboxes') {
  .fui-checkbox-wrapper {
    display: block;
    position: relative;
    min-height: $checkbox-min-height; // 20px
    width: auto;
    margin: 10px 0 0 0;

    .checkbox-holder {
      z-index: 0;
      position: absolute;
      height: $checkbox-min-height; // 20px
      width: $checkbox-min-height; // 20px
      border: 1px solid $gray-300;
      border-radius: 3px;
      box-sizing: border-box;
      top: 0;
      left: 0;
      display: inline-block;
      background: $white;

      .fui-tick,
      .fui-less {
        box-sizing: border-box;
        position: absolute;
        top: 0;
        width: $checkmark-width; // 8px
        height: $checkmark-width; // 8px
        left: $checkmark-left-value; // 5px
        transform: translate(0, $checkmark-left-value);
        color: $white;
      }

      &.checked,
      &.indeterminate {
        background-color: $blue;
        border-color: $blue;
      }
    }
    &.has-fui-helper {
      display: flex;
      input[type='checkbox'] + label {
        display: inline-block;
        margin-right: 0.4375rem;
      }
      .fui-helper {
        flex-shrink: 0;
        margin-top: 2px;
      }
    }

    input[type='checkbox'] {
      box-sizing: border-box;
      z-index: 1;
      width: $checkbox-min-height; // 20px
      height: $checkbox-min-height;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      padding: 0;
      margin: 0;
      cursor: pointer;

      + label {
        color: $gray-900;
        font-size: $font-size-base; // 14px
        cursor: pointer;
        box-sizing: border-box;
        display: block;
        position: relative;
        user-select: none;
        min-height: $checkbox-min-height;
        padding-left: calc(#{$checkbox-min-height} + #{$radio-checkbox-label-left-value});
        line-height: $controls-icons-default-width;
        padding-top: 2px;
        font-weight: $font-weight-base;
      }

      &:not([disabled]):focus,
      &:not([disabled]):hover {
        ~ .checkbox-holder {
          background-color: $gray-200 !important;

          &.checked,
          &.indeterminate {
            background-color: $blue-hover !important;
            border-color: $blue-hover !important;
          }
        }
      }

      &[disabled] {
        cursor: default !important;

        + label {
          color: $gray-500 !important;
          cursor: default !important;
        }

        ~ .checkbox-holder {
          background-color: $gray-200 !important;
          border-color: $gray-400 !important;

          .fui-tick,
          .fui-less {
            fill: $gray-500 !important;
          }

          &.checked,
          &.indeterminate {
            border-color: $gray-400 !important;
            background-color: $gray-200 !important;
          }
        }
      }
    }
  }

  .fui-control-container {
    .fui-checkbox-subtext-wrapper {
      display: none;
      padding: 5px 0 0 2px;

      .fui-subtext {
        color: $red;
        display: inline-block;
        vertical-align: middle;
        padding: 0 0 0 12px;

        visibility: hidden;
        opacity: 0;
        transition: visibility 0s ease 0.2s, opacity 0.2s ease;
      }
    }

    &.fui-touched,
    &.fui-dirty {
      .fui-checkbox-subtext-wrapper {
        .fui-subtext:first-child {
          visibility: visible;
          opacity: 1;
          transition-delay: 0s;
        }
      }

      &.fui-error {
        .fui-checkbox-subtext-wrapper {
          display: block;
        }

        .fui-checkbox-wrapper {
          .checkbox-holder {
            border-color: $red;
          }
        }
      }
    }
  }
}