.draco-button {
  &:hover,
  &.mock-hover {
    &.draco-button--color-primary {
      background-color: var(--token-color-palette-neutral-200);
      border-color: var(--token-color-palette-neutral-200);
    }

    &.draco-button--color-secondary {
      background-color: var(--token-color-palette-neutral-800);
      border-color: var(--token-color-palette-neutral-700);
    }

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

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

  &:focus,
  &.mock-focus {
    &.draco-button--color-primary {
      background-color: var(--token-color-palette-neutral-200);
      border-color: var(--token-color-focus-action-internal);

      &::before {
        $shift: 1px + 3px + 2px;
        top: -$shift;
        right: -$shift;
        bottom: -$shift;
        left: -$shift;
        border-color: var(--token-color-focus-action-external);
        border-radius: calc(var(--token-border-radius-small) + 3px + 2px);
        opacity: 1;
      }
    }
  }

  &:active,
  &.mock-active {
    will-change: transform, box-shadow;
    box-shadow: none;
    transform: scale(0.98);
  }

  &:disabled,
  &[disabled],
  &.mock-disabled,
  &:disabled:focus,
  &[disabled]:focus,
  &.mock-disabled:focus,
  &:disabled:hover,
  &[disabled]:hover,
  &.mock-disabled:hover {
    cursor: not-allowed;
    color: var(--token-color-palette-neutral-400);
    background-color: var(--token-color-palette-neutral-900);
    border-color: var(--token-color-palette-neutral-800);
    box-shadow: none;
    cursor: not-allowed;

    transform: none !important;
    will-change: auto !important;

    &::before {
      border-color: transparent;
    }
  }
}