@use "../colors" as c;
@use "font-size";
@use "media";

@mixin ilios-button() {
  appearance: none;
  background-color: c.$tealBlue;
  border: 0;
  border-radius: 3px;
  box-sizing: border-box;
  color: c.$white;
  cursor: pointer;
  display: inline-block;
  padding: 0.3em 1em;
  vertical-align: middle;
  white-space: nowrap;

  @include font-size.font-size("base");
  //at small sizes scale to keep button text in the button
  @include media.for-phone-only {
    /* stylelint-disable property-disallowed-list */
    font-size: 3vw;
  }
}

@mixin ilios-button-reset {
  padding: 0;
  border: 0;
  border-radius: 0;
  font: inherit;
  color: inherit;
  background-color: transparent;
  cursor: pointer;
  white-space: normal;
}

@mixin ilios-link-button() {
  @include ilios-button-reset;
  color: c.$blueMunsell;
  text-align: left;
}
