.button {
  display: block;
  border: none;
  text-decoration: none;
  padding: var(--_button-padding);
  font-family: var(--font-accent);
  font-size: var(--_button-font-size);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;

  border-radius: var(--radius-normal);
  transition: background 0.07s ease-in;

  &:disabled {
    cursor: not-allowed;
    opacity: 60%;
  }

  &:has(.icon) {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
  }

  /* If the icon is the only thing in the Button, don't give it additional margin */
  &:not(.iconOnly) .icon {
    margin-left: var(--space-md);
  }
}

.filled {
  background-color: var(--_button-background);
  color: var(--_button-text);

  &:hover:not(:disabled) {
    background-color: var(--_button-background-hover);
  }

  &:active:not(:disabled) {
    background-color: var(--_button-background-active);
  }
}
.outline {
  box-sizing: border-box;
  background-color: transparent;
  border: 1px solid var(--_button-background);
  color: var(--text-normal);

  &:hover:not(:disabled) {
    border-color: var(--_button-background-hover);
    background-color: var(--_button-background-translucent);
  }

  &:active:not(:disabled) {
    border-color: var(--_button-background-active);
    background-color: var(--_button-background-translucent);
  }
}

.small {
  --_button-padding: var(--space-sm) var(--space-md);
  --_button-font-size: 12px;
}
.medium {
  --_button-padding: var(--space-md) var(--space-lg);
  --_button-font-size: 16px;
}
.large {
  --_button-padding: var(--space-lg) var(--space-lg);
  --_button-font-size: 20px;
}

.primary {
  --_button-background: var(--accent-background);
  --_button-text: var(--accent-foreground);
  --_button-background-hover: var(--accent-hover);
  --_button-background-active: var(--accent-active);
  --_button-background-translucent: var(--accent-translucent);
}
.default {
  --_button-background: var(--status-default-background);
  --_button-text: var(--status-default-foreground);
  --_button-background-hover: var(--status-default-hover);
  --_button-background-active: var(--status-default-active);
  --_button-background-translucent: var(--status-default-translucent);
}
.success {
  --_button-background: var(--status-success-background);
  --_button-text: var(--status-success-foreground);
  --_button-background-hover: var(--status-success-hover);
  --_button-background-active: var(--status-success-active);
  --_button-background-translucent: var(--status-success-translucent);
}
.warning {
  --_button-background: var(--status-warning-background);
  --_button-text: var(--status-warning-foreground);
  --_button-background-hover: var(--status-warning-hover);
  --_button-background-active: var(--status-warning-active);
  --_button-background-translucent: var(--status-warning-translucent);
}
.danger {
  --_button-background: var(--status-danger-background);
  --_button-text: var(--status-danger-foreground);
  --_button-background-hover: var(--status-danger-hover);
  --_button-background-active: var(--status-danger-active);
  --_button-background-translucent: var(--status-danger-translucent);
}
.info {
  --_button-background: var(--status-info-background);
  --_button-text: var(--status-info-foreground);
  --_button-background-hover: var(--status-info-hover);
  --_button-background-active: var(--status-info-active);
  --_button-background-translucent: var(--status-info-translucent);
}
.link {
  --_button-background: transparent;
  --_button-text: var(--text-normal);
  --_button-background-hover: var(--interactive-background-hover);
  --_button-background-active: var(--interactive-background-active);
  --_button-background-translucent: transparent;

  &:hover {
    text-decoration: underline;
  }
}