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

/*
 * Copyright 2026 Shota FUJI
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 *
 * SPDX-License-Identifier: MPL-2.0
 */

:host {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

::slotted([slot="key"]) {
	font-weight: 300;
	font-size: 1.2rem;
}

::slotted([slot="description"]) {
	font-size: 0.9rem;
}

.actions {
	display: flex;
	gap: 1rem;
	margin-top: 0.5rem;
}

::slotted([slot="action"]) {
	--_bg: AccentColor;
	--_fg: AccentColorText;
	--_darker: color-mix(in oklch, var(--_bg) 90%, oklch(from var(--_bg) 10% c h) 10%);
	--_lighter: color-mix(in oklch, var(--_bg) 90%, oklch(from var(--_bg) 90% c h) 10%);
	padding: 0.2em 0.5em;
	border: 1px solid color-mix(in oklch, var(--_bg) 80%, CanvasText 20%);

	background-image: linear-gradient(to bottom, var(--_bg) 70%, var(--_darker));
	border-radius: 3px;
	color: var(--_fg);
	text-decoration: none;

	@supports not (color: AccentColor) {
		--_bg: ButtonFace;
		--_fg: ButtonText;
	}
}

::slotted([slot="action"]:hover) {
	background-image: linear-gradient(to bottom, var(--_lighter) 70%, var(--_bg));
}

@supports not (color: color-mix(in oklch, black 90%, oklch(from black 10% c h) 10%)) {
	::slotted([slot="action"]) {
		background-color: var(--_bg);
		border-color: ButtonBorder;
		color: var(--_fg);
	}

	::slotted([slot="action"]:hover) {
		text-decoration: underline;
	}
}