fleet/frontend/components/forms/fields/Checkbox/_styles.scss

.fleet-checkbox {
  @include clearfix;
  position: relative;
  display: flex;
  align-items: center;

  &:hover:not(.fleet-checkbox__label--disabled) {
    svg {
      .checkbox-state {
        stroke: $core-vibrant-blue-over;
        fill: $core-vibrant-blue-over;
      }
      .checkbox-unchecked-state {
        stroke: $core-vibrant-blue-over;
      }
    }
  }

  // During click only
  &:active:not(.fleet-checkbox__label--disabled) {
    svg {
      .checkbox-state {
        stroke: $core-vibrant-blue-down;
        fill: $core-vibrant-blue-down;
      }
      .checkbox-unchecked-state {
        stroke: $core-vibrant-blue-down;
      }
    }
  }

  // When tabbing
  &:focus-visible:not(.fleet-checkbox__label--disabled) {
    outline: none;

    svg {
      outline: 2px solid $ui-vibrant-blue-25;
      outline-offset: 1px;
      border-radius: $border-radius;
    }
  }

  &--disabled {
    svg {
      .checkbox-state {
        stroke: $ui-fleet-black-25;
        fill: $ui-fleet-black-25;
      }
      .checkbox-unchecked-state {
        stroke: $ui-fleet-black-25;
      }
    }
  }

  &__label {
    font-size: $x-small;
    padding-left: $pad-small;
    display: inline-block;
    vertical-align: top;

    &--disabled {
      color: $ui-fleet-black-50;

      svg {
        .checkbox-state {
          stroke: $ui-fleet-black-25;
          fill: $ui-fleet-black-25;
        }
        .checkbox-unchecked-state {
          stroke: $ui-fleet-black-25;
          fill: $ui-fleet-black-25;
        }
      }
    }
  }

  &__label-tooltip {
    font-size: $x-small;
    padding-left: $pad-small;
    display: inherit;
    vertical-align: top;
  }

  &__help-text {
    @include help-text;
  }
}

.inverse {
  flex-direction: row-reverse; // Switches the text to the left side of checkbox as all checkboxes are now display flex

  .fleet-checkbox {
    &__icon {
      padding-left: $pad-small;
    }

    &__label {
      float: left;
      padding-left: 0;
      font-weight: $bold;
      font-size: $x-small;
    }
  }
}