.button {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--default-transition-duration)
    var(--default-transition-timing-function);
  border: 1px solid transparent;
  outline: none;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--text-sm--line-height);

  /* Variant */
  &[data-variant="primary"] {
    background-color: var(--color-foreground);
    color: var(--color-background);

    &:hover {
      background-color: color-mix(
        in oklab,
        var(--color-primary) 90%,
        transparent
      );
    }
  }

  &[data-variant="secondary"] {
    background-color: var(--color-secondary);
    color: var(--color-secondary-foreground);

    &:hover {
      background-color: color-mix(
        in oklab,
        var(--color-secondary) 80%,
        transparent
      );
    }
  }

  &[data-variant="outline"] {
    border-color: var(--color-input);
    background-color: var(--color-background);
    box-shadow: var(--shadow-xs);
    color: var(--color-secondary-foreground);

    &:hover {
      background-color: var(--color-accent);
      color: var(--color-accent-foreground);
    }
  }

  &[data-variant="ghost"] {
    background-color: transparent;
    color: var(--color-secondary-foreground);

    &:hover {
      background-color: var(--color-accent);
      color: var(--color-accent-foreground);
    }
  }

  &[data-variant="destructive"] {
    background-color: var(--color-destructive);
    color: var(--color-white);

    &:hover {
      background-color: color-mix(
        in oklab,
        var(--color-destructive) 90%,
        transparent
      );
    }
  }

  &[data-variant="link"] {
    background-color: transparent;
    color: var(--color-secondary-foreground);
    text-decoration: none;
    text-underline-offset: 4px;

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

  /* Size */
  &[data-size="xs"] {
    height: calc(var(--spacing) * 6);
    padding-inline: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
  }

  &[data-size="sm"] {
    height: calc(var(--spacing) * 8);
    padding-inline: calc(var(--spacing) * 3);
  }

  &[data-size="md"] {
    height: calc(var(--spacing) * 9);
    padding-inline: calc(var(--spacing) * 4);
  }

  &[data-size="lg"] {
    height: calc(var(--spacing) * 10);
    padding-inline: calc(var(--spacing) * 6);
  }

  &[data-size="icon"] {
    width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9);
  }

  &[data-size="xs"],
  &[data-size="sm"] {
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-sm);
  }

  &[data-size="md"],
  &[data-size="lg"],
  &[data-size="icon"] {
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-md);
  }

  /* Icon */
  & > svg {
    flex-shrink: 0;
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    pointer-events: none;
  }

  /* Active */
  &:active {
    scale: 0.98;
  }

  /* Disabled */
  &:disabled {
    opacity: 0.5;
    pointer-events: none;
  }

  /* Focus */
  &:focus-visible {
    &:not(&[data-variant="destructive"]) {
      box-shadow: 0 0 0 3px
        color-mix(in oklab, var(--color-ring) 50%, transparent);
    }

    &[data-variant="destructive"] {
      box-shadow: 0 0 0 3px
        color-mix(in oklab, var(--color-destructive) 20%, transparent);
    }

    &[data-variant="outline"] {
      border-color: var(--color-ring);
    }
  }
}

:global(.dark) {
  .button {
    &[data-variant="destructive"] {
      background-color: color-mix(
        in oklab,
        var(--color-destructive) 60%,
        transparent
      );
    }

    &[data-variant="outline"] {
      background-color: color-mix(
        in oklab,
        var(--color-input) 30%,
        transparent
      );

      &:hover {
        background-color: color-mix(
          in oklab,
          var(--color-input) 50%,
          transparent
        );
      }
    }

    &[data-variant="ghost"]:hover {
      background-color: color-mix(
        in oklab,
        var(--color-accent) 50%,
        transparent
      );
    }
  }
}
