1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42
43. 43
44. 44
45. 45
46. 46
47. 47
48. 48
49. 49
50. 50
51. 51
52. 52

import { attr, className, el, on } from "../../dom";

export const styles = /* css */ `
  .ib-button {
    appearance: none;
    display: inline-flex;
    border: none;
    padding: var(--action-vertical-padding) var(--action-horizontal-padding);
    margin: 0;
    font-size: calc(var(--font-size) * 0.9);

    background: transparent;
    border-radius: var(--action-radius);
    color: inherit;
    cursor: pointer;
    outline: none;
  }
  .ib-button:hover {
    background: var(--action-overlay);
  }
  .ib-button:focus {
    outline: none;
  }
  .ib-button:focus-visible {
    outline: 2px solid SelectedItem;
  }

  .ib-button > svg {
    width: auto;
    height: 1em;
  }
`;

interface IconButtonProps {
  title: string;

  icon: SVGElement;

  onClick(): void;
}

export function iconButton({
  title,
  icon,
  onClick,
}: IconButtonProps): HTMLElement {
  return el(
    "button",
    [className("ib-button"), attr("title", title), on("click", onClick)],
    [icon],
  );
}