.button {
  display: flex;
  align-items: center;
  padding: var(--space-xs);

  min-block-size: 3.5rem;
  inline-size: max-content;
  min-inline-size: 10rem;
  max-inline-size: 20rem;

  border-width: 0;
  border-radius: var(--border-radius);
  background-color: var(--color-primary);

  color: var(--color-text-active);
  text-align: center;
  text-decoration: none;
  line-height: var(--line-height-short);

  cursor: pointer;

  &.icon-only {
    min-inline-size: fit-content;
  }

  &:hover {
    background-color: var(--color-primary-major);
    color: var(--color-text-active);
  }

  &.danger {
    background-color: var(--color-danger-major);
    &:hover {
      background-color: var(--color-danger);
      color: var(--color-text);
    }
  }

  &.inactive {
    background-color: transparent;
    border: 1px solid var(--color-primary);
    color: var(--color-text);
    &:hover {
      background-color: var(--color-primary);
      color: var(--color-text-active);
    }
  }
}