@use "sass:color";
@use "variables";


// state colors
.is-primary {
  background-color: variables.$primary-color;
  color: variables.$neutral-white;
  border-color: color.adjust(variables.$primary-color, $lightness: - 10%);
}

.is-secondary {
  background-color: variables.$secondary-color;
  color: variables.$neutral-white;
}

.is-warning {
  background: variables.$neutral-white;
  color: variables.$warning-color-text;
  border: 0;

}

.is-info {
  background: variables.$info-color;
  color: variables.$neutral-white;
  border-color: color.adjust(variables.$info-color, $lightness: -50%);
}

.is-success {
  background: variables.$success-color;
  color: variables.$neutral-white;
  border-color: color.adjust(variables.$success-color, $lightness: -50%);

}

.is-error {
  background: rgba(variables.$danger-color, 10%);
  color: variables.$danger-color;
  border: 0;
}


.is-clickable {
  cursor: pointer;
}
