.button {
  appearance: none;
  padding: 0.5rem 1.5rem;
  border-radius: 4px;
  transition: background linear 0.15s;

  --btn-background: transparent;
  --btn-color: #000;
  --btn-border: #ddd;

  color: var(--btn-color);
  background: var(--btn-background);
  border: 1px solid var(--btn-border);

  &:not([disabled]) {
    cursor: pointer;
  }

  &.default {
    --btn-color: var(--button-default-color);
    --btn-border: var(--button-default-border);
    --btn-background: var(--button-default-background);

    &[disabled] {
      --btn-background: var(--button-default-disabled);
      --btn-color: var(--button-default-disabled-color);
    }

    &:not([disabled]) {
      &:hover,
      &:focus-visible {
        --btn-background: var(--button-default-hover);
      }

      &:active {
        --btn-background: var(--button-default-active);
      }
    }
  }

  &.primary {
    --btn-color: var(--button-primary-color);
    --btn-border: 1px solid var(--button-primary-border);
    --btn-background: var(--button-primary-background);

    &[disabled] {
      --btn-background: var(--button-primary-disabled);
      --btn-color: var(--button-primary-disabled-color);
    }

    &:not([disabled]) {
      &:hover,
      &:focus-visible {
        --btn-background: var(--button-primary-hover);
      }

      &:active {
        --btn-background: var(--button-primary-active);
      }
    }
  }

  &.link {
    --btn-border: transparent;
    --btn-background: transparent;
    --btn-color: var(--button-link-color);
    padding: 0.5rem 0.5rem;

    &:not([disabled]) {
      &:hover,
      &:focus-visible {
        text-decoration: underline;
      }
    }
  }
}