.draco-button {
  &.draco-button--color-primary {
    color: black;
    border-color: var(--token-color-palette-neutral-100);
    background-color: var(--token-color-palette-neutral-100);
    box-shadow: var(--token-elevation-low-box-shadow);
  }

  &.draco-button--color-secondary {
    color: var(--token-color-palette-neutral-200);
    background-color: var(--token-color-palette-neutral-950);
    border-color: var(--token-color-palette-neutral-700);
    box-shadow: var(--token-elevation-low-box-shadow);
  }

  &.draco-button--color-amber {
    color: var(--token-color-palette-neutral-950);
    background-color: var(--token-color-palette-orange-500);
    border-color: var(--token-color-palette-orange-500);
    box-shadow: var(--token-elevation-low-box-shadow);
  }

  &.draco-button--color-error {
    color: var(--token-color-palette-neutral-100);
    background-color: var(--token-color-palette-red-500);
    border-color: var(--token-color-palette-red-500);
    box-shadow: var(--token-elevation-low-box-shadow);
  }

  &.draco-button--color-tertiary {
    background-color: transparent;
    border-color: transparent;
    color: var(--token-color-palette-neutral-400);
  }
}