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
53. 53
54. 54
55. 55
56. 56
57. 57
58. 58
59. 59
60. 60
61. 61
62. 62
63. 63
64. 64
65. 65
66. 66
67. 67
68. 68
69. 69
70. 70
71. 71
72. 72
73. 73
74. 74
75. 75
76. 76
77. 77
78. 78
79. 79
80. 80
81. 81
82. 82
83. 83
84. 84
85. 85
86. 86
87. 87
88. 88
89. 89
90. 90
91. 91
92. 92
93. 93
94. 94
95. 95
96. 96
97. 97
98. 98
99. 99
100. 100
101. 101
102. 102
103. 103
104. 104
105. 105
106. 106
107. 107
108. 108
109. 109
110. 110
111. 111
112. 112
113. 113
114. 114

/*
 * SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com>
 * SPDX-License-Identifier: AGPL-3.0-only
 */

:not(:is(style, script)) {
	all: unset;
	box-sizing: border-box;
}

:host {
	display: flex;
	position: relative;
	padding: var(--space-px-2);
	border: 1px solid oklch(var(--color-border) / var(--alpha-border-medium));

	background-image: linear-gradient(
		to right bottom,
		oklch(100% 0% 0deg / 30%),
		oklch(0% 0% 0deg / 5%)
	);
	background-color: oklch(var(--color-bg));
	border-radius: 5px;
	color: oklch(var(--color-fg) / var(--alpha-fg-medium));
	user-select: none;
	cursor: pointer;
}

:host([inline]) {
	display: inline-flex;
}

:host(:is(:disabled, [aria-disabled="true"])) {
	color: oklch(var(--color-fg) / var(--alpha-fg-subtle));
	cursor: not-allowed;
	text-decoration: line-through;
}

:host(:is(:state(pending), :--pending, [x--_pending])) {
	color: transparent;
}

@media (hover: hover) {
	:host(:not(:is(:disabled, [aria-disabled="true"], :state(pending), :--pending, [x--_pending])):hover) {
		border-color: oklch(var(--color-border) / var(--alpha-border-strong));
	}
}

:host(:focus-visible:focus-visible), :host(:has(:focus-visible:focus-visible)) {
	border-color: oklch(var(--color-focus));
	box-shadow: 0 0 0 var(--size-focus-ring)
		oklch(var(--color-focus) / var(--alpha-focus-ring));
	outline: none;
}

:host(:enabled:not(:is([aria-disabled="true"], :state(pending), :--pending, [x--_pending])):is(:active, :state(pressed), :--pressed, [x--_pressed])) {
	background-image: linear-gradient(
		to left top,
		oklch(100% 0% 0deg / 30%),
		oklch(0% 0% 0deg / 5%)
	);
}

.inner {
	flex: 1;
	padding: var(--space-px-3) var(--space-px-5);
	border: 1px solid oklch(var(--color-fg) / 5%);

	background-image: linear-gradient(
		to left top,
		oklch(100% 0% 0deg / 10%),
		oklch(0% 0% 0deg / 3%)
	);
	background-color: inherit;
	border-radius: inherit;
	text-align: center;
}

:host(:not(:is(:disabled, [aria-disabled="true"], :state(pending), :--pending, [x--_pending])):is(:active, :state(pressed), :--pressed, [x--_pressed]))
	.inner {
	transform: translateY(1px);
	filter: brightness(0.99);
}

.spinner {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	width: var(--font-md);
	height: var(--font-md);
	border: 2px solid oklch(var(--color-fg) / var(--alpha-fg-medium));
	border-top-color: transparent;

	border-radius: 50%;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

:host(:is(:state(pending), :--pending, [x--_pending])) .spinner {
	display: block;
	animation: 1.3s 0s forwards infinite ease-in-out spin;
}