.button {
  align-items: center;
  appearance: none;
  background-color: var(--ba-light);
  border: var(--border-1) solid var(--ba-border-active);
  display: flex;
  color: var(--ba-dark);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  height: var(--height-200);
  line-height: inherit;
  padding: var(--margin-050) var(--margin-100);
}

.button:hover {
  background-color: var(--ba-light-hover);
}

.button:active {
  background-color: var(--ba-light-active);
}

.button:focus-visible {
  box-shadow: 0 0 var(--border-1) var(--border-1) var(--ba-lightyellow);
  border: var(--border-1) solid var(--ba-lightyellow);
  border-radius: var(--margin-025);
  outline: none;
}

.button__icon-container {
  display: flex;
  align-items: center;
  font-size: 1.25rem;
  margin-right: var(--margin-050);
}

.button__label {
  white-space: nowrap;
}

.button--color-primary {
  background-color: var(--ba-blue);
}

.button--color-transparent {
  background-color: transparent;
  color: var(--ba-light);
}
.button--color-transparent:hover {
  background-color: var(--ba-dark-hover);
}
.button--color-transparent:active {
  background-color: var(--ba-dark-active);
}

.button--no-border {
  border: var(--border-1) solid transparent;
}

.button--border-radius-left {
  border-radius: var(--margin-025) 0 0 var(--margin-025);
}
.button--border-radius-right {
  border-radius: 0 var(--margin-025) var(--margin-025) 0;
}
.button--border-radius-all {
  border-radius: var(--margin-025);
}

.button--disabled,
.button--disabled:hover,
.button--disabled:active {
  background-color: var(--ba-border-active);
  cursor: not-allowed;
}

.button--color-transparent.button--disabled,
.button--color-transparent.button--disabled:hover.button--disabled,
.button--color-transparent.button--disabled:active.button--disabled {
  background-color: transparent;
  color: var(--ba-dark-active);
}
