button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  height: 48px;
  border: none;
  border-radius: var(--nylas-border-radius-2x);
  font-size: 16px;
  line-height: 24px;
  padding: 0 1rem;
  cursor: pointer;
  font-family: var(--nylas-font-family);
  font-weight: 600;
  width: 100%;
}
@media screen and (max-width: 768px) {
  button {
    width: 100%;
  }
}
button.button-primary {
  background: var(--nylas-primary);
  color: var(--nylas-base-0);
  height: 48px;
  border: none;
  border-radius: var(--nylas-border-radius-2x);
  font-size: 16px;
  line-height: 24px;
  padding: 0 1rem;
  cursor: pointer;
}
button.button-primary:hover {
  background: var(--nylas-base-600);
}
button.button-primary:active {
  background: var(--nylas-base-800);
}
button.button-primary:disabled {
  background: var(--nylas-base-300);
  cursor: not-allowed;
}
button.button-basic {
  border: 1px solid var(--nylas-base-300);
  color: var(--nylas-base-700);
  background: transparent;
}
button.button-basic:hover {
  background: transparent;
  border-color: var(--nylas-primary);
}
button.button-basic:active {
  background: transparent;
  border-color: var(--nylas-base-600);
  border-width: 2px;
}
button.button-basic:disabled {
  background: transparent;
  border-color: var(--nylas-base-300);
  color: var(--nylas-base-300);
  cursor: not-allowed;
}
button.button-destructive {
  border: 1px solid var(--nylas-base-300);
  color: var(--nylas-error);
  background: transparent;
}
button.button-destructive:hover {
  background: transparent;
  border-color: var(--nylas-error);
}
button.button-destructive:active {
  background: transparent;
  border-color: var(--nylas-error-pressed);
  border-width: 2px;
  color: var(--nylas-error-pressed);
}
button.button-destructive:disabled {
  background: transparent;
  border-color: var(--nylas-base-300);
  color: var(--nylas-base-300);
  cursor: not-allowed;
}
button.button-invisible {
  background: transparent;
  color: var(--nylas-base-800);
  border: none;
}
button.button-invisible:hover {
  background: var(--nylas-base-50);
  color: var(--nylas-primary);
}
button.button-invisible:active {
  background: var(--nylas-base-50);
  color: var(--nylas-base-850);
}
button.button-invisible:disabled {
  background: transparent;
  color: var(--nylas-base-300);
  cursor: not-allowed;
}