@import "../../styles/global.scss";
@import "../../styles/variables.scss";

.ai-checkbox-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  input.ai-checkbox[type="checkbox"] {
    margin: 0px;
    border: 1px solid $color-core-grey-base;
    box-sizing: border-box;
    &:after {
      box-sizing: border-box;
      content: "";
      vertical-align: middle;
      text-align: center;
      position: absolute;
      cursor: pointer;
      height: 14px;
      width: 14px;
      font-size: 6px;
      background: $color-core-white;
      border: 1px solid $color-core-grey-base;
      border-radius: 2px;
      line-height: 14px;
    }
    &:checked:after {
      background: $color-font-blue;
      content: "\e90b";
      color: $color-core-white;
      border: none;
    }
    &:hover:after {
      background: $color-core-blue-lighter;
    }
    &:checked:hover:after {
      background: $color-core-blue-dark;
      content: "\e90b";
      color: $color-core-white;
      border: none;
    }
    &:focus:after {
      box-shadow: 0 0 0 2px $color-core-blue-light;
    }
  }

  cursor: pointer;
  .checkbox-label {
    padding: 0;
    margin: 0 0 0 8px;
    font-size: 14px;
  }
}

.ai-checkbox-disable {
  input.ai-checkbox[type="checkbox"] {
    &:after {
      background: $color-core-grey-lighter;
    }
    &:checked:hover:after {
      background: $color-core-blue-light;
    }
    &:checked:after {
      background: $color-core-blue-light;
    }
    &:hover:after {
      background: $color-core-grey-lighter;
    }
  }
  .checkbox-label {
    color: $color-core-ink-lightest;
  }
}