@import '../../global';
@import '../../mixins/actionable';

.checkbox {
  display: inline-flex;

  &_container {
    @include actionable;

    &:focus {
      border-color: color('primary');
    }

    cursor: pointer;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 0px;
    margin-right: $push;

    width: 18px;
    height: 18px;

    color: color('white') !important;

    &__checked {
      border-color: color('primary');
      background-color: color('primary');
    }
  }
}