4 box-sizing: border-box;
6 -webkit-user-select: none;
10 outline: 5px auto -webkit-focus-ring-color;
23 // a.button is required to override link formatting, such as drop-down buttons
25 background-color: var(--wcfButtonBackground);
26 border-radius: var(--wcfBorderRadius);
28 color: var(--wcfButtonText);
29 // `0.25em` is the average width of a space that previously separated elements.
34 justify-content: center;
38 text-decoration: none;
40 // input elements do not inherit font family, size and line-height from body
41 font-family: var(--wcfFontFamily);
42 @include wcfFontDefault;
43 @include wcfLineHeight;
45 // removes UA styling enforced by Safari on iOS
46 -webkit-appearance: none;
48 @include userSelectNone;
55 background-color: var(--wcfButtonBackgroundActive);
56 color: var(--wcfButtonTextActive);
57 text-decoration: none;
63 @include wcfFontSmall;
71 @media (pointer: coarse) {
85 input[type="button"].buttonPrimary,
87 .button.buttonPrimary,
88 a.button.buttonPrimary {
89 // a.button is required to override link formatting, such as dropdown buttons
90 background-color: var(--wcfButtonPrimaryBackground);
91 color: var(--wcfButtonPrimaryText);
94 background-color: var(--wcfButtonPrimaryBackgroundActive);
95 color: var(--wcfButtonPrimaryTextActive);
99 /* hover states are only applied to non-touch devices to avoid "leftover" hover states after taps */
101 input[type="button"],
103 input[type="submit"],
107 background-color: var(--wcfButtonBackgroundActive);
108 color: var(--wcfButtonTextActive);
109 text-decoration: none;
113 input[type="button"].buttonPrimary,
114 input[type="submit"],
115 .button.buttonPrimary,
116 a.button.buttonPrimary {
117 // a.button is required to override link formatting, such as dropdown buttons
119 background-color: var(--wcfButtonPrimaryBackgroundActive);
120 color: var(--wcfButtonPrimaryTextActive);
126 input[type="button"],
128 input[type="submit"],
133 background-color: var(--wcfButtonDisabledBackground) !important;
134 color: var(--wcfButtonDisabledText) !important;
135 cursor: not-allowed !important;
136 pointer-events: none;
140 /* force active state for buttons toggling a dropdown */
142 > input[type="button"],
143 > input[type="reset"],
144 > input[type="submit"],
147 background-color: var(--wcfButtonBackgroundActive);
148 color: var(--wcfButtonTextActive);
151 > input[type="button"].buttonPrimary,
152 > input[type="submit"],
153 > .button.buttonPrimary,
154 > a.button.buttonPrimary {
155 background-color: var(--wcfButtonPrimaryBackgroundActive);
156 color: var(--wcfButtonPrimaryTextActive);
163 &.smallButtons .button {
166 @include wcfFontSmall;
171 margin-bottom: -10px;
184 min-width: -moz-min-content;
185 min-width: -webkit-min-content;
186 min-width: min-content;
193 .buttonList.iconList a {
194 color: var(--wcfButtonText);
197 .buttonGroupNavigation > ul {
214 &:first-child .button {
215 border-top-left-radius: var(--wcfBorderRadius);
216 border-bottom-left-radius: var(--wcfBorderRadius);
219 &:last-child .button {
220 border-top-right-radius: var(--wcfBorderRadius);
221 border-bottom-right-radius: var(--wcfBorderRadius);