- &:hover, &:active, &:focus, &[disabled], &.disabled {
- color: $grey-foreground-color;
+ &:hover {
+ color: pvar(--mainColor);
+ background-color: pvar(--mainColorLightest);
+ }
+
+ &[disabled],
+ &.disabled {
+ cursor: default;
+ color: pvar(--mainColor);
+ background-color: #C6C6C6;
+ }
+
+ my-global-icon {
+ @include apply-svg-color(pvar(--mainColor));
+ }
+}
+
+@mixin tertiary-button {
+ @include button-focus($grey-button-outline-color);
+
+ color: pvar(--greyForegroundColor);
+ background-color: transparent;
+
+ &[disabled],
+ .disabled {
+ cursor: default;
+ }
+
+ my-global-icon {
+ @include apply-svg-color(transparent);
+ }
+}
+
+@mixin grey-button {
+ @include button-focus($grey-button-outline-color);
+
+ background-color: $grey-background-color;
+ color: pvar(--greyForegroundColor);
+
+ &:hover,
+ &:active,
+ &:focus,
+ &[disabled],
+ &.disabled {
+ color: pvar(--greyForegroundColor);