1/* decor */
2%button {
3  @extend %user-select-none;
4  cursor: pointer;
5  white-space: nowrap;
6}
7%button:disabled {
8  cursor: default;
9  box-shadow: none;
10}
11%copy-button {
12  @extend %button, %with-clipboard;
13}
14%primary-button,
15%secondary-button,
16%dangerous-button {
17  @extend %button;
18  border-width: 1px;
19  border-radius: $radius-small;
20  box-shadow: 0 3px 1px 0 rgba($ui-black, 0.12);
21}
22/* color */
23%copy-button {
24  color: $ui-color-action;
25  background-color: $ui-color-transparent;
26}
27%copy-button:hover:not(:disabled):not(:active),
28%copy-button:focus {
29  color: $ui-color-action;
30  background-color: $ui-gray-050;
31}
32%copy-button:disabled {
33}
34%copy-button:active {
35  background-color: $ui-gray-200;
36}
37%primary-button {
38  @extend %frame-blue-800;
39}
40%primary-button:hover:not(:disabled):not(:active),
41%primary-button:focus {
42  @extend %frame-blue-700;
43}
44%primary-button:disabled {
45  @extend %frame-blue-600;
46}
47%primary-button:hover:active {
48  @extend %frame-blue-900;
49}
50/**/
51%secondary-button {
52  /* %frame-gray-something */
53  color: $ui-gray-800;
54  background-color: $ui-gray-050;
55  border-color: $ui-gray-300;
56  border-style: solid;
57}
58%secondary-button:hover:not(:disabled):not(:active),
59%secondary-button:focus {
60  /* %frame-gray-something */
61  background-color: $ui-white;
62  color: $ui-gray-800;
63  border-color: $ui-gray-700;
64}
65%secondary-button:disabled {
66  color: $ui-gray-600;
67}
68%secondary-button:active {
69  /* %frame-gray-something */
70  background-color: $ui-gray-200;
71  color: $ui-gray-800;
72  border-color: $ui-gray-700;
73}
74/**/
75%dangerous-button {
76  @extend %frame-red-300;
77}
78%dangerous-button:hover:not(:disabled):not(:active),
79%dangerous-button:focus {
80  @extend %frame-red-700;
81}
82%dangerous-button:disabled {
83  @extend %frame-red-600;
84}
85%dangerous-button:hover:active {
86  @extend %frame-red-900;
87}
88