@import 'src/globals/_variables.scss';

.check {
  align-items: center;
  background-color: $ads-color-white;
  border: 2px solid $ads-color-black-100;
  cursor: pointer;
  display: inline-flex;
  height: 24px;
  justify-content: center;
  transition: all 0.2s ease;
  width: 24px;

  &:focus-visible {
    outline: 2px solid $ads-color-black;
    outline-offset: 2px;
  }
}

.check.rounded {
  border-radius: 50%;
}

.check:not(.rounded) {
  border-radius: 15%;
}

.checked {
  color: $ads-color-white;
}

.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.default {
  border-color: $ads-color-black;
}

.default.checked {
  background-color: $ads-color-black;
}

.success {
  border-color: $ads-color-success;
}

.success.checked {
  background-color: $ads-color-success;
}

.info {
  border-color: $ads-color-info;
}

.info.checked {
  background-color: $ads-color-info;
}

.warning {
  border-color: $ads-color-warning;
}

.warning.checked {
  background-color: $ads-color-warning;
}

.danger {
  border-color: $ads-color-danger;
}

.danger.checked {
  background-color: $ads-color-danger;
}

.icon {
  stroke: $ads-color-white;
}
