@mixin btn-solid-mktg($color, $bg, $bg2, $bg3, $bg4) {
color: $color; background-color: $bg2; background-image: linear-gradient(-180deg, $bg 0%, $bg2 100%); &::before { background-image: linear-gradient(-180deg, $bg3 0%, $bg4 100%); } &:hover, &.hover, &:active, &.selected, &[aria-selected=true], [open] > & { background-color: $bg2; background-image: linear-gradient(-180deg, $bg 0%, $bg2 100%); } &:focus, &.focus { outline: 0; box-shadow: 0 0 0 0.2em rgba($bg2, 0.4); } &:disabled, &.disabled, &[aria-disabled=true] { pointer-events: none; cursor: default; opacity: 0.5; }
}
@mixin btn-outline-mktg($color, $color2, $border, $borderHover, $borderFocus, $borderFocusInset) {
color: $color; background: none; box-shadow: 0 0 0 1px $border inset; &::before { display: none; } &:hover, &.hover, &:active, &.selected, &[aria-selected=true], [open] > & { color: $color2; background: none; box-shadow: 0 0 0 2px $borderHover inset; } &:focus, &.focus { outline: 0; box-shadow: 0 0 0 2px $borderFocus inset, 0 0 0 4px $borderFocusInset; } &:disabled, &.disabled, &[aria-disabled=true] { opacity: 0.5; }
}
$browser-context: 16 !default;
@function rem($pixels, $context: $browser-context) {
@if (unitless($pixels)) { $pixels: $pixels * 1px; } @if (unitless($context)) { $context: $context * 1px; } @return $pixels / $context * 1rem;
}