// Import default component's file with styles
@import '../../../../components/checkbox/style';

.st-checkbox {
  $root: &;

  &__inner {
    border-radius: 1px;
    transition: none;
  }

  &--checked {
    #{$root}__inner {
      background-color: $st-color-royal-blue;
      border-color: $st-color-royal-blue;
    }

    &:hover {
      #{$root}__inner {
        background-color: $st-color-cerulean-blue;
        border-color: $st-color-cerulean-blue;
      }
    }
  }

  &:hover {
    #{$root}__inner {
      border-color: $st-color-royal-blue;
    }
  }

  &--disabled {
    &:not(.st-checkbox--checked) .st-checkbox__inner {
      background-color: $st-color-white;
      border-color: $st-color-light-gray;
    }

    #{$root}__label {
      color: $st-color-black;
    }
  }
}