1.btn {
2  padding-top: $spacer / 2;
3  padding-right: $spacer;
4  padding-bottom: $spacer / 2;
5  padding-left: $spacer;
6  display: inline-flex;
7  align-items: center;
8  justify-content: space-around;
9  svg {
10    margin-right: $spacer / 4;
11  }
12  &:disabled {
13    color: gray("600");
14    fill: currentColor;
15    box-shadow: none !important;
16    &:not(.btn-link) {
17      border-color: gray("400");
18      background-color: gray("400");
19    }
20  }
21}
22
23.btn-primary {
24  fill: currentColor;
25  &:focus,
26  &:not(:disabled):not(.disabled):active:focus {
27    border-color: $white;
28    box-shadow: inset 0 0 0 3px theme-color('primary'), inset 0 0 0 5px $white;
29  }
30}
31
32.btn-secondary {
33  fill: currentColor;
34  &:focus,
35  &:not(:disabled):not(.disabled):active:focus {
36    border-color: $white;
37    box-shadow: inset 0 0 0 3px theme-color('secondary'), inset 0 0 0 5px $white;
38  }
39}
40
41// Global style for all button link
42.btn-link {
43  font-weight: $headings-font-weight;
44  fill: theme-color("primary");
45  text-decoration: none !important;
46  &:hover {
47    background-color: gray("200");
48    color: theme-color("primary");
49  }
50  &:active {
51    background-color: gray("300");
52  }
53  &:focus {
54    box-shadow: inset 0 0 0 2px theme-color("primary");
55    color: theme-color("primary");
56    outline: none;
57  }
58  &:disabled {
59    box-shadow: $btn-focus-box-shadow;
60  }
61}
62
63// Icon only buttons
64.btn-icon-only svg {
65  margin-right: 0;
66}
67
68// Datepicker, clear search and Password toggle buttons
69.input-action-btn,
70.btn-datepicker {
71  position: absolute;
72  right: 0;
73  top: 0;
74  z-index: $zindex-dropdown + 1;
75}
76
77// Contain input buttons within input
78.btn-datepicker .dropdown-toggle,
79.input-action-btn {
80  padding: 7px;
81  margin: 1px;
82}