/*
CHECKBOXES
==========
*/

@import '~styles/variables';

$checkbox-dim: 15px;

.Input[type='checkbox'] {
  display: inline-block;
  margin-left: -12px;
  width: auto;

  z-index: 0;
}

.Input--checkbox {
  &-placeholder {
    background-color: $white;
    border: 1px solid $dark-gray;
    cursor: pointer;
    height: $checkbox-dim;
    width: $checkbox-dim;
    z-index: 1;

    &.is-checked {
      background-image: url('https://upload.wikimedia.org/wikipedia/commons/e/e9/Echo_curation_alt_check_mark.svg');
      background-position: 25% 50%;
      background-repeat: no-repeat;
      background-size: $checkbox-dim;
    }
  }

  .Input-label-text {
    width: auto;
  }
}