@import '../../../styles/_base.scss';

.outer {
  font-family: $font-stack;
  height: 20px;
  margin-bottom: 12px;
  user-select: none;
  &:not(.disabled) {
    label {
      &:hover {
        .text {
          color: $navy_2;
        }
        .checkbox {
          color: $teal_1;
          &.special {
            color: $sp_dark_green;
          }
        }
      }
    }
  }
}

.input {
  display: none;
}

.label {
  cursor: pointer;
  position: relative;
  &:before {
    content: none !important;
  }
}

.checkbox {
  fill: currentColor;
  float: left;
  position: absolute;
  left: 0;
}

.empty {
  color: $n_grey_1;
  &:hover {
    color: $teal_1;
    &.special {
      color: $sp_dark_green;
    }
  }
  @include transition(color 0.2s);
}

.full {
  color: $teal_1;
  opacity: 0;
  &.special {
    color: $sp_dark_green;
  }
  &.checked {
    opacity: 1;
  }
  @include transition(opacity 0.2s);
}

.text {
  color: $navy_1;
  float: left;
  font-size: $checkbox-size;
  font-weight: $regular;
  margin-top: 2px;
  padding-left: 30px;
  user-select: none;
}

.warning {
  float: left;
  padding-left: 10px;
  color: $sp_orange;
  fill: currentColor;
}

.disabled {
  opacity: .6;
  .label {
    cursor: not-allowed;
  }
}