.button.primary {
  background: var(--primary);
  color: var(--light-font);
  border: none;
}
.button.primary[disabled] {
  background-color: var(--excluded-font);
  cursor: not-allowed;
}
.button.primary[disabled] > span.material-icons {
  color: white !important;
}
.button.secondary {
  border: solid 1px var(--primary);
  color: var(--primary);
  background: transparent;
}
.button.tertiary {
  height: 25px;
  border: solid 1px var(--primary);
  border-radius: 20px;
  color: var(--light-font);
  background: transparent;
  transition: all 230ms ease-in-out;
}
.button.tertiary:hover {
  background: var(--primary);
}
.button.with-icon {
  display: flex;
  align-items: center;
  gap: 10px;
}
.button.primary, .button.secondary, .button.cancel {
  border-radius: 6px;
  height: 50px;
  padding: 0 30px;
  min-width: 135px;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.button.primary .material-icons, .button.secondary .material-icons, .button.cancel .material-icons {
  font-size: 34px;
}
.button.icon {
  background: none;
  padding: 10px;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-items: center;
  gap: 10px;
}
.button.icon .material-icons,
.button.icon .material-icons-outlined {
  font-size: 28px;
  color: var(--primary);
}
.button.icon.border {
  border: solid 1px var(--primary);
  padding: 3px;
}
.button.icon.border .material-icons {
  color: var(--primary);
  font-size: 24px;
}
.button.icon.stacked {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.button.transparent {
  background: none;
  border: none;
}
.button.left {
  text-align: left;
}
.button.short {
  height: 34px;
  font-weight: 500;
  font-size: 11px;
}
.button.short .material-icons {
  font-size: 20px;
}
.button.cancel {
  border: solid 1px var(--new-status-indicator);
  color: var(--primary-font);
  background: transparent;
  padding: 0 4px;
}
.button.cancel .material-icons,
.button.cancel .material-icons-outlined {
  color: var(--new-status-indicator);
}
.button.match {
  height: 30px;
  font-size: 13px;
  font-weight: 500;
  color: var(--light-font);
  width: 100px;
  min-width: auto;
  padding: 0;
}
.button.match.is-matched {
  background: var(--new-status-indicator);
  font-size: 11px;
}
.button.link-button {
  background-color: transparent;
  color: #337ab7;
  font-weight: bold;
  border: none;
}

/*# sourceMappingURL=buttons.css.map */