@momentum-ui/web-components 2.16.2 → 2.16.3

package/src/components/button/scss/button.scss

@@ -0,0 +1,1067 @@
+/** @component button */
+
+@include exports("md-button") {
+  [class|="md-button__container"] {
+    @include flex($display: inline-flex, $fd: column);
+
+    width: $button-container__width;
+
+    &[class$="--small"] {
+      width: $button-container--small__width;
+    }
+  }
+
+  // Default styles applied outside of media query
+  :host .md-button {
+    @include single-transition(background-color, $button__transition-speed, ease);
+    @include button-base;
+    @include button-size($height: rem-calc(36), $padding: $button__padding--36, $radius: $button__radius--36);
+    @include button-color($focus: true);
+    // default button - secondary styling
+    // Declarations before nested rules
+    & {
+      background-color: var(--button-secondary-bg-color);
+
+      box-sizing: border-box;
+      color: var(--button-secondary-text-color);
+    }
+
+    &:hover {
+      background-color: var(--button-secondary-hover-bg-color);
+      color: var(--button-secondary-text-color);
+    }
+
+    &:active {
+      background-color: var(--button-secondary-pressed-bg-color);
+      color: var(--button-secondary-text-color);
+    }
+
+    &:disabled,
+    &.disabled {
+      background-color: var(--button-disabled-bg-color);
+      color: var(--button-disabled-text-color);
+      &:focus {
+        background-color: var(--button-disabled-bg-color);
+        color: var(--button-disabled-text-color);
+      }
+    }
+
+    &::after {
+      border-radius: calc(#{$button__radius--36} + #{$button-focus-gap-ring});
+      content: "";
+      display: block;
+      height: calc(100% + (#{$button-focus-gap-ring} * 2));
+      left: 0;
+      margin: -$button-focus-gap-ring;
+      position: absolute;
+      top: 0;
+      width: calc(100% + (#{$button-focus-gap-ring} * 2));
+    }
+
+    &:focus::after {
+      box-shadow: 0 0 0 $focus-ring-size var(--button-focus-ring-color);
+    }
+
+    + .md-button__label {
+      color: var(--md-primary-text-color, $md-gray-100);
+      display: block;
+      overflow: hidden;
+      text-align: center;
+      width: 100%;
+    }
+
+    &--left {
+      text-align: left;
+      text-indent: rem-calc(12);
+    }
+
+    &--right {
+      padding-right: rem-calc(12);
+      text-align: right;
+    }
+
+    &--outline {
+      box-shadow: $button--default__border;
+
+      &:hover {
+        box-shadow: none !important;
+      }
+    }
+
+    // Remove default button element styling
+    &--none {
+      // Declarations before nested rules
+      box-shadow: none;
+      min-width: 0;
+
+      @include button-color(
+        $color: inherit,
+        $bg: transparent,
+        $bg-hover: transparent,
+        $bg-active: transparent,
+        $color-disabled: $button__link-color--disabled
+      );
+
+      @include button-size($radius: 0, $padding: 0, $height: auto);
+    }
+
+    &--size-none {
+      min-width: 0;
+      @include button-size($radius: 0, $padding: 0, $height: auto);
+    }
+
+    &--24 {
+      @include button-size(
+        $height: rem-calc(24),
+        $padding: $button__padding--24,
+        $radius: $button__radius--24,
+        $font-size: $button__font-size--24
+      );
+    }
+
+    &--28 {
+      @include button-size(
+        $height: rem-calc(28),
+        $padding: $button__padding--28,
+        $radius: $button__radius--28,
+        $font-size: $button__font-size--28
+      );
+    }
+
+    &--32 {
+      @include button-size(
+        $height: rem-calc(32),
+        $padding: $button__padding--32,
+        $radius: $button__radius--32,
+        $font-size: $button__font-size--32
+      );
+    }
+
+    &--36 {
+      @include button-size($height: rem-calc(36), $padding: $button__padding--36, $font-size: $button__font-size--36);
+    }
+
+    &--40 {
+      @include button-size($height: rem-calc(40), $padding: $button__padding--40, $radius: $button__radius--40);
+    }
+
+    &--52 {
+      @include button-size($height: rem-calc(52), $padding: $button__padding--52, $radius: $button__radius--52);
+    }
+
+    &--circle {
+      padding: 0;
+
+      @include button-circle-size($size: $button__size--36, $font-size: $button__font-size--36);
+      @include radius($button__radius--round);
+
+      &::after {
+        border-radius: $button__radius--round;
+      }
+
+      &[class*="--none"] {
+        @include button-circle-size($size: auto);
+        @include button-color(
+          $color: inherit,
+          $bg: transparent,
+          $bg-hover: transparent,
+          $bg-active: transparent,
+          $color-disabled: $button__link-color--disabled
+        );
+      }
+
+      &[class*="--size-none"] {
+        @include button-circle-size($size: auto);
+      }
+
+      &[class*="--20"] {
+        @include button-circle-size($size: $button__size--20, $font-size: $button__font-size--20);
+      }
+
+      &[class*="--24"] {
+        @include button-circle-size($size: $button__size--24, $font-size: $button__font-size--24);
+      }
+
+      &[class*="--28"] {
+        @include button-circle-size($size: $button__size--28, $font-size: $button__font-size--28);
+      }
+
+      &[class*="--32"] {
+        @include button-circle-size($size: $button__size--32, $font-size: $button__font-size--32);
+      }
+
+      &[class*="--36"] {
+        @include button-circle-size($size: $button__size--36, $font-size: $button__font-size--36);
+      }
+
+      &[class*="--40"] {
+        @include button-circle-size($size: $button__size--40, $font-size: $button__font-size--40);
+      }
+
+      &[class*="--44"] {
+        @include button-circle-size($size: $button__size--44, $font-size: $button__font-size--44);
+      }
+
+      &[class*="--52"] {
+        @include button-circle-size($size: $button__size--52, $font-size: $button__font-size--52);
+      }
+
+      &[class*="--56"] {
+        @include button-circle-size($size: $button__size--56, $font-size: $button__font-size--56);
+      }
+
+      &[class*="--68"] {
+        @include button-circle-size($size: $button__size--68, $font-size: $button__font-size--68);
+      }
+
+      &[class*="--72"] {
+        @include button-circle-size($size: $button__size--72, $font-size: $button__font-size--72);
+      }
+
+      &[class*="--84"] {
+        @include button-circle-size($size: $button__size--84, $font-size: $button__font-size--84);
+      }
+
+      &.icon {
+        font-family: $icon-font-name;
+      }
+    }
+
+    &--rounded {
+      @include radius($button__radius--rounded);
+      &::after {
+        border-radius: $button__radius--rounded;
+      }
+    }
+
+    .md-loading {
+      left: 50%;
+      position: absolute;
+      transform: translateX(-50%);
+    }
+
+    &--blue {
+      @include button-color(
+        $color: $button__font-color--alt,
+        $bg: $button--blue__background-color--contrast,
+        $bg-hover: $button--blue__background-color--hover--contrast,
+        $bg-active: $button--blue__background-color--active--contrast,
+        $focus: true
+      );
+    }
+
+    &--blue.md-button--outline {
+      @include button-color(
+        $color: $button--blue__outline-color,
+        $color-hover: $button__font-color--alt,
+        $color-active: $button__font-color--alt,
+        $bg: transparent,
+        $box-shadow: $button--blue__border,
+        $bg-hover: $button--blue__background-color--hover--contrast,
+        $bg-active: $button--blue__background-color--active--contrast,
+        $focus: true
+      );
+    }
+
+    &--red {
+      @include button-color(
+        $color: $button__font-color--alt,
+        $bg: $button--red__background-color,
+        $bg-hover: $button--red__background-color--hover,
+        $bg-active: $button--red__background-color--active
+      );
+    }
+
+    &--red.md-button--outline {
+      @include button-color(
+        $color: $button--red__background-color,
+        $color-hover: $button__font-color--alt,
+        $color-active: $button__font-color--alt,
+        $bg: transparent,
+        $box-shadow: $button--red__border,
+        $bg-hover: $button--red__background-color--hover,
+        $bg-active: $button--red__background-color--active
+      );
+    }
+
+    &--green {
+      @include button-color(
+        $color: $button__font-color--alt,
+        $bg: $button--green__background-color,
+        $bg-hover: $button--green__background-color--hover,
+        $bg-active: $button--green__background-color--active
+      );
+    }
+
+    &--green.md-button--outline {
+      @include button-color(
+        $color: $button--green__background-color,
+        $color-hover: $button__font-color--alt,
+        $color-active: $button__font-color--alt,
+        $bg: transparent,
+        $box-shadow: $button--green__border,
+        $bg-hover: $button--green__background-color--hover,
+        $bg-active: $button--green__background-color--active
+      );
+    }
+
+    &--orange {
+      @include button-color(
+        $color: $button__font-color--alt,
+        $bg: $button--orange__background-color,
+        $bg-hover: $button--orange__background-color--hover,
+        $bg-active: $button--orange__background-color--active
+      );
+    }
+
+    &--orange.md-button--outline {
+      @include button-color(
+        $color: $button--orange__background-color,
+        $color-hover: $button__font-color--alt,
+        $color-active: $button__font-color--alt,
+        $bg: transparent,
+        $box-shadow: $button--orange__border,
+        $bg-hover: $button--orange__background-color--hover,
+        $bg-active: $button--orange__background-color--active
+      );
+    }
+
+    &--yellow {
+      @include button-color(
+        $color: $button__font-color--alt,
+        $bg: $button--yellow__background-color,
+        $bg-hover: $button--yellow__background-color--hover,
+        $bg-active: $button--yellow__background-color--active
+      );
+    }
+
+    &--yellow.md-button--outline {
+      @include button-color(
+        $color: $button--yellow__background-color,
+        $color-hover: $button__font-color--alt,
+        $color-active: $button__font-color--alt,
+        $bg: transparent,
+        $box-shadow: $button--yellow__border,
+        $bg-hover: $button--yellow__background-color--hover,
+        $bg-active: $button--yellow__background-color--active
+      );
+    }
+
+    &--mint {
+      @include button-color(
+        $color: $button__font-color--alt,
+        $bg: $button--mint__background-color,
+        $bg-hover: $button--mint__background-color--hover,
+        $bg-active: $button--mint__background-color--active
+      );
+    }
+
+    &--mint.md-button--outline {
+      @include button-color(
+        $color: $button--mint__background-color,
+        $color-hover: $button__font-color--alt,
+        $color-active: $button__font-color--alt,
+        $bg: transparent,
+        $box-shadow: $button--mint__border,
+        $bg-hover: $button--mint__background-color--hover,
+        $bg-active: $button--mint__background-color--active
+      );
+    }
+
+    &--purple {
+      @include button-color(
+        $color: $button__font-color--alt,
+        $bg: $button--purple__background-color,
+        $bg-hover: $button--purple__background-color--hover,
+        $bg-active: $button--purple__background-color--active
+      );
+    }
+
+    &--purple.md-button--outline {
+      @include button-color(
+        $color: $button--purple__background-color,
+        $color-hover: $button__font-color--alt,
+        $color-active: $button__font-color--alt,
+        $bg: transparent,
+        $box-shadow: $button--purple__border,
+        $bg-hover: $button--purple__background-color--hover,
+        $bg-active: $button--purple__background-color--active
+      );
+    }
+
+    &--pink {
+      @include button-color(
+        $color: $button__font-color--alt,
+        $bg: $button--pink__background-color,
+        $bg-hover: $button--pink__background-color--hover,
+        $bg-active: $button--pink__background-color--active
+      );
+    }
+
+    &--pink.md-button--outline {
+      @include button-color(
+        $color: $button--pink__background-color,
+        $color-hover: $button__font-color--alt,
+        $color-active: $button__font-color--alt,
+        $bg: transparent,
+        $box-shadow: $button--pink__border,
+        $bg-hover: $button--pink__background-color--hover,
+        $bg-active: $button--pink__background-color--active
+      );
+    }
+
+    &--cyan {
+      @include button-color(
+        $color: $button__font-color--alt,
+        $bg: $button--cyan__background-color,
+        $bg-hover: $button--cyan__background-color--hover,
+        $bg-active: $button--cyan__background-color--active
+      );
+    }
+
+    &--cyan.md-button--outline {
+      @include button-color(
+        $color: $button--cyan__background-color,
+        $color-hover: $button__font-color--alt,
+        $color-active: $button__font-color--alt,
+        $bg: transparent,
+        $box-shadow: $button--cyan__border,
+        $bg-hover: $button--cyan__background-color--hover,
+        $bg-active: $button--cyan__background-color--active
+      );
+    }
+
+    &--white {
+      @include button-color(
+        $color: $md-black-100,
+        $bg: $button--white__background-color,
+        $bg-hover: $button--white__background-color--hover,
+        $bg-active: $button--white__background-color--active
+      );
+    }
+
+    &--white.md-button--outline {
+      @include button-color(
+        $color: $button--dark-gray__background-color,
+        $color-hover: $md-gray-80,
+        $color-active: $md-gray-80,
+        $bg: transparent,
+        $box-shadow: $button--white__border,
+        $bg-hover: $button--white__background-color--hover,
+        $bg-active: $button--white__background-color--active
+      );
+    }
+
+    &--dark-gray {
+      @include button-color(
+        $color: $button__font-color--alt,
+        $bg: $button--dark-gray__background-color,
+        $bg-hover: $button--dark-gray__background-color--hover,
+        $bg-active: $button--dark-gray__background-color--active
+      );
+    }
+
+    &--dark-gray.md-button--outline {
+      @include button-color(
+        $color: $button--dark-gray__background-color,
+        $color-hover: $button__font-color--alt,
+        $color-active: $button__font-color--alt,
+        $bg: transparent,
+        $box-shadow: $button--dark-gray__border,
+        $bg-hover: $button--dark-gray__background-color--hover,
+        $bg-active: $button--dark-gray__background-color--active
+      );
+    }
+
+    &--duck-egg {
+      @include button-color(
+        $color: $button__font-color--alt,
+        $bg: $button--duck-egg__background-color,
+        $bg-hover: $button--duck-egg__background-color--hover,
+        $bg-active: $button--duck-egg__background-color--active
+      );
+    }
+
+    &--duck-egg.md-button--outline {
+      @include button-color(
+        $color: $button--duck-egg__background-color,
+        $color-hover: $button__font-color--alt,
+        $color-active: $button__font-color--alt,
+        $bg: transparent,
+        $box-shadow: $button--duck-egg__border,
+        $bg-hover: $button--duck-egg__background-color--hover,
+        $bg-active: $button--duck-egg__background-color--active
+      );
+    }
+
+    &--violet {
+      @include button-color(
+        $color: $button__font-color--alt,
+        $bg: $button--violet__background-color,
+        $bg-hover: $button--violet__background-color--hover,
+        $bg-active: $button--violet__background-color--active
+      );
+    }
+
+    &--violet.md-button--outline {
+      @include button-color(
+        $color: $button--violet__background-color,
+        $color-hover: $button__font-color--alt,
+        $color-active: $button__font-color--alt,
+        $bg: transparent,
+        $box-shadow: $button--violet__border,
+        $bg-hover: $button--violet__background-color--hover,
+        $bg-active: $button--violet__background-color--active
+      );
+    }
+
+    &--link {
+      color: $anchor-font-color;
+
+      @include button-color(
+        $color: $button__font-color--alt,
+        $bg: transparent,
+        $bg-hover: $button__background-color--hover,
+        $bg-active: $button__background-color--active
+      );
+    }
+
+    &--color-none {
+      @include button-color(
+        $color: inherit,
+        $bg: transparent,
+        $bg-hover: transparent,
+        $bg-active: transparent,
+        $color-disabled: $button__link-color--disabled
+      );
+    }
+
+    &[class*="md-button--icon"] {
+      .#{$icon__class} {
+        fill: inherit;
+      }
+    }
+
+    &.md-button--icon {
+      min-width: 0;
+
+      @include button-color(
+        $color: inherit,
+        $bg: transparent,
+        $bg-hover: transparent,
+        $bg-active: transparent,
+        $color-disabled: $button__link-color--disabled
+      );
+      @include button-color-fill(
+        $fill: $md-gray-70,
+        $fill-hover: $md-theme-60,
+        $fill-active: $md-theme-70,
+        $fill-disabled: $button__link-color--disabled
+      );
+      @include button-size($radius: 0, $padding: 0, $height: auto);
+
+      &.md-button--icon-white {
+        @include button-color-fill(
+          $fill: $icon--white__fill,
+          $fill-hover: $icon--white__fill--hover,
+          $fill-active: $icon--white__fill--active,
+          $fill-disabled: $icon--white__fill--disabled
+        );
+      }
+    }
+
+    &.md-button--onlyicon {
+      &:disabled,
+      &.disabled {
+        background-color: transparent !important;
+      }
+    }
+  }
+}
+
+// --------------------------------------------------------------
+// LUMOS ADDED STYLES -- MUST REVIEW THE ABOVE TO AVOID OVERRIDES
+// --------------------------------------------------------------
+
+:host([type="reset"]) {
+  appearance: none !important;
+}
+
+:host([type="submit"]) {
+  appearance: none !important;
+}
+
+:host([variant="primary"]) .md-button {
+  background-color: var(--button-primary-bg-color);
+  color: var(--button-primary-text-color);
+
+  &:hover {
+    background-color: var(--button-primary-hover-bg-color);
+  }
+
+  &:active {
+    background-color: var(--button-primary-pressed-bg-color);
+  }
+
+  &:disabled,
+  &.disabled {
+    background-color: var(--button-disabled-bg-color);
+    color: var(--button-disabled-text-color);
+  }
+}
+
+:host([variant="inverted-primary"]) .md-button {
+  background-color: var(--button-inverted-primary-bg-color);
+  color: var(--button-inverted-primary-text-color);
+
+  &:hover {
+    background-color: var(--button-inverted-primary-hover-bg-color);
+  }
+
+  &:active {
+    background-color: var(--button-inverted-primary-pressed-bg-color);
+  }
+
+  &:disabled,
+  &.disabled {
+    background-color: var(--button-inverted-primary-disabled-bg-color);
+    color: var(--button-inverted-primary-disabled-text-color);
+  }
+}
+
+:host([variant="dropdown"]) .md-button {
+  font-family: var(--brand-font-regular, $brand-font-regular);
+  font-weight: 400;
+  font-size: rem-calc(14);
+
+  background-color: var(--button-dropdown-bg-color);
+  color: var(--button-dropdown-text-color);
+  border: 1px solid var(--button-dropdown-border-color);
+
+  &--placeholder-text {
+    color: var(--button-dropdown-text-color-placeholder)
+  }
+
+  &:hover {
+    background-color: var(--button-dropdown-hover);
+  }
+  &:active {
+    background-color: var(--button-dropdown-active);
+  }
+
+  &:disabled,
+  &.disabled {
+    background-color: var(--button-dropdown-disabled-bg-color);
+    color: var(--button-dropdown-disabled-text-color);
+    border: 1px solid var(--button-dropdown-disabled-border-color);
+  }
+}
+
+:host([variant="inverted-secondary"]) .md-button {
+  background-color: var(--button-inverted-secondary-bg-color);
+  color: var(--button-inverted-secondary-text-color);
+  border: 1px solid var(--button-inverted-secondary-border-color);
+
+  &:hover {
+    background-color: var(--button-inverted-secondary-hover-bg-color);
+    color: var(--button-inverted-secondary-text-color);
+  }
+
+  &:active {
+    background-color: var(--button-inverted-secondary-pressed-bg-color);
+    color: var(--button-inverted-secondary-text-color);
+  }
+
+  &:disabled,
+  &.disabled {
+    background-color: var(--button-inverted-secondary-disabled-bg-color);
+    border: 1px solid var(--button-inverted-secondary-disabled-border-color);
+    color: var(--button-inverted-secondary-disabled-text-color);
+  }
+}
+
+:host([variant="promotional"]) .md-button {
+  background: var(--button-promotional-bg-color);
+  color: var(--button-promotional-text-color, var(--button-primary-text-color));
+
+  &:hover {
+    background: var(--button-promotional-hover-bg-color);
+  }
+
+  &:active {
+    background: var(--button-promotional-pressed-bg-color);
+  }
+
+  &:disabled,
+  &.disabled {
+    background: var(--button-disabled-bg-color);
+    color: var(--button-disabled-text-color);
+  }
+}
+
+:host([variant="ghost"]) .md-button {
+  background-color: var(--button-ghost-bg-color, transparent);
+  color: var(--button-ghost-text-color, var(--button-secondary-text-color));
+  border: unset;
+
+  &:hover {
+    background-color: var(--button-ghost-hover-bg-color, var(--button-secondary-hover-bg-color));
+  }
+
+  &:active {
+    background-color: var(--button-ghost-pressed-bg-color, var(--button-secondary-pressed-bg-color));
+  }
+
+  &:disabled,
+  &.disabled {
+    background-color: var(--button-ghost-disabled-bg-color, transparent);
+    color: var(--button-ghost-disabled-text-color, var(--button-disabled-text-color));
+  }
+}
+
+:host([variant="secondary"]) .md-button {
+  &:not(.isActive) {
+    background-color: var(--button-secondary-bg-color);
+    color: var(--button-secondary-text-color);
+    border: 1px solid var(--button-secondary-border-color);
+
+    &:hover {
+      background-color: var(--button-secondary-hover-bg-color);
+      color: var(--button-secondary-text-color);
+    }
+
+    &:active {
+      background-color: var(--button-secondary-pressed-bg-color);
+      color: var(--button-secondary-text-color);
+    }
+
+    &:disabled,
+    &.disabled {
+      background-color: var(--button-secondary-disabled-bg-color, var(--button-disabled-bg-color));
+      border: 1px solid var(--button-secondary-disabled-border-color);
+      color: var(--button-secondary-disabled-text-color, var(--button-disabled-text-color));
+    }
+  }
+
+  &.isActive {
+    background-color: var(--button-secondary-active-bg-color);
+    color: var(--button-secondary-text-color);
+    border: 1px solid var(--button-secondary-border-color);
+
+    &:hover {
+      background-color: var(--button-secondary-active-hover-bg-color);
+      color: var(--button-secondary-text-color);
+    }
+
+    &:active {
+      background-color: var(--button-secondary-active-pressed-bg-color);
+      color: var(--button-secondary-text-color);
+    }
+
+    &:disabled,
+    &.disabled {
+      background-color: var(--button-secondary-disabled-bg-color, var(--button-disabled-bg-color));
+      border: 1px solid var(--button-secondary-disabled-border-color);
+      color: var(--button-secondary-disabled-text-color, var(--button-disabled-text-color));
+    }
+  }
+}
+
+:host([variant="red"]) .md-button {
+  background-color: var(--button-red-bg-color);
+  color: var(--button-red-text-color, var(--button-primary-text-color));
+
+  &:hover {
+    background-color: var(--button-red-hover-bg-color);
+  }
+
+  &:active {
+    background-color: var(--button-red-pressed-bg-color);
+  }
+
+  &:disabled,
+  &.disabled {
+    background-color: var(--button-disabled-bg-color);
+    color: var(--button-disabled-text-color);
+  }
+}
+
+:host([variant="green"]) .md-button {
+  background-color: var(--button-green-bg-color);
+  color: var(--button-green-text-color, var(--button-primary-text-color));
+
+  &:hover {
+    background-color: var(--button-green-hover-bg-color);
+  }
+
+  &:active {
+    background-color: var(--button-green-pressed-bg-color);
+  }
+
+  &:disabled,
+  &.disabled {
+    background-color: var(--button-disabled-bg-color);
+    color: var(--button-disabled-text-color);
+  }
+}
+
+:host([variant="available"]) .md-button {
+  background-color: var(--button-available-bg-color);
+  color: var(--button-secondary-text-color);
+  border: 1px solid var(--button-available-border-color);
+  font-size: rem-calc(14);
+  font-family: var(--brand-font-regular, $brand-font-regular);
+  font-weight: 400;
+
+  &--32 {
+    border-radius: var(--button-state-selector-border-radius, $button__radius--32);
+    padding: $button__padding__state-selector--32;
+    &::after {
+      border-radius: calc(var(--button-state-selector-border-radius, $button__radius--32) + 2px);
+    }
+  }
+
+  &:hover {
+    background-color: var(--button-available-hover-bg-color);
+  }
+
+  &:active {
+    background-color: var(--button-available-pressed-bg-color);
+  }
+
+  &:disabled,
+  &.disabled {
+    background-color: var(--button-disabled-bg-color);
+    color: var(--button-disabled-text-color);
+  }
+}
+
+:host([variant="unavailable"]) .md-button {
+  background-color: var(--button-unavailable-bg-color);
+  color: var(--button-secondary-text-color);
+  border: 1px solid var(--button-unavailable-border-color);
+  border-radius: var(--button-state-selector-border-radius);
+  font-size: rem-calc(14);
+  font-family: var(--brand-font-regular, $brand-font-regular);
+  font-weight: 400;
+
+  &--32 {
+    border-radius: var(--button-state-selector-border-radius, $button__radius--32);
+    padding: $button__padding__state-selector--32;
+    &::after {
+      border-radius: calc(var(--button-state-selector-border-radius, $button__radius--32) + 2px);
+    }
+  }
+
+  &:hover {
+    background-color: var(--button-unavailable-hover-bg-color);
+  }
+
+  &:active {
+    background-color: var(--button-unavailable-pressed-bg-color);
+  }
+
+  &:disabled,
+  &.disabled {
+    background-color: var(--button-disabled-bg-color);
+    color: var(--button-disabled-text-color);
+  }
+}
+
+:host([variant="idle"]) .md-button {
+  background-color: var(--button-idle-bg-color);
+  color: var(--button-secondary-text-color);
+  border: 1px solid var(--button-idle-border-color);
+  border-radius: var(--button-state-selector-border-radius);
+  font-size: rem-calc(14);
+  font-family: var(--brand-font-regular, $brand-font-regular);
+  font-weight: 400;
+
+  &--32 {
+    border-radius: var(--button-state-selector-border-radius, $button__radius--32);
+    padding: $button__padding__state-selector--32;
+    &::after {
+      border-radius: calc(var(--button-state-selector-border-radius, $button__radius--32) + 2px);
+    }
+  }
+
+  &:hover {
+    background-color: var(--button-idle-hover-bg-color);
+  }
+
+  &:active {
+    background-color: var(--button-idle-pressed-bg-color);
+  }
+
+  &:disabled,
+  &.disabled {
+    background-color: var(--button-disabled-bg-color);
+    color: var(--button-disabled-text-color);
+  }
+}
+
+:host([variant="white"]) .md-button {
+  background-color: var(--button-white-bg-color);
+  color: var(--button-white-text-color);
+
+  &:hover {
+    background-color: var(--button-white-hover-bg-color);
+  }
+
+  &:active {
+    background-color: var(--button-white-pressed-bg-color);
+  }
+
+  &--outline {
+    box-shadow: 0 0 0 1px var(--button-white-outline-color);
+    color: var(--button-white-outline-text-color);
+  }
+}
+
+:host([variant="inverted-white"]) .md-button {
+  background-color: var(--button-inverted-white-bg-color);
+  color: var(--button-inverted-white-text-color);
+
+  &:hover {
+    background-color: var(--button-inverted-white-hover-bg-color);
+  }
+
+  &:active {
+    background-color: var(--button-inverted-white-pressed-bg-color);
+  }
+
+  &:disabled,
+  &.disabled {
+    background-color: var(--button-disabled-bg-color);
+    color: var(--button-disabled-text-color);
+  }
+
+  &--outline {
+    box-shadow: 0 0 0 1px var(--button-inverted-white-outline-color);
+    color: var(--button-inverted-white-outline-text-color);
+  }
+}
+
+:host([variant="engaged"]) .md-button {
+  background-color: var(--button-engaged-bg-color);
+  color: var(--button-secondary-text-color);
+  border: 1px solid var(--button-engaged-border-color);
+  border-radius: var(--button-state-selector-border-radius);
+  font-size: rem-calc(14);
+  font-family: var(--brand-font-regular, $brand-font-regular);
+  font-weight: 400;
+
+  &--32 {
+    border-radius: var(--button-state-selector-border-radius, $button__radius--32);
+    padding: $button__padding__state-selector--32;
+
+    &::after {
+      border-radius: calc(var(--button-state-selector-border-radius, $button__radius--32) + 2px);
+    }
+  }
+
+  &:hover {
+    background-color: var(--button-engaged-hover-bg-color);
+  }
+
+  &:active {
+    background-color: var(--button-engaged-pressed-bg-color);
+  }
+}
+
+:host([variant="tab"]) .md-button {
+  &:not(.isActive) {
+    background-color: var(--button-ghost-bg-color, transparent);
+    color: var(--button-ghost-text-color, var(--button-secondary-text-color));
+
+    &:hover {
+      background-color: var(--button-ghost-hover-bg-color, var(--button-secondary-hover-bg-color));
+    }
+
+    &:active {
+      background-color: var(--button-ghost-pressed-bg-color, var(--button-secondary-pressed-bg-color));
+    }
+
+    &:disabled,
+    &.disabled {
+      background-color: var(--button-ghost-disabled-bg-color, transparent);
+      color: var(--button-ghost-disabled-text-color, var(--button-disabled-text-color));
+    }
+  }
+
+  &.isActive {
+    background-color: var(--button-ghost-active-bg-color);
+    color: var(--button-ghost-active-text-color);
+
+    &:hover {
+      background-color: var(--button-ghost-active-hover-bg-color);
+    }
+
+    &:active {
+      background-color: var(--button-ghost-active-pressed-bg-color);
+    }
+
+    &:disabled,
+    &.disabled {
+      background-color: var(--button-ghost-active-disabled-bg-color);
+      color: var(--button-ghost-active-disabled-text-color);
+    }
+  }
+}
+
+::slotted(*) {
+  display: flex;
+}
+
+::slotted([slot="text"]) {
+  align-self: end;
+  display: block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+::slotted(*:not(:first-child)) {
+  display: inline-block;
+  margin-left: 0.5rem;
+}
+
+::slotted(md-icon) {
+  line-height: normal;
+}
+
+md-spinner {
+  display: flex;
+}
+
+md-spinner + ::slotted(*) {
+  margin-left: 0.5rem;
+}
+
+@media (forced-colors: active) {
+  :host .md-button {
+    &:focus {
+      outline: 2px solid Highlight;
+    }
+    &:active {
+      color: Highlight;
+      outline: 2px solid Highlight;
+    }
+
+    &.disabled,
+    &[disabled] {
+      color: GrayText !important;
+    }
+  }
+
+  :host .md-button--outline {
+    &.disabled {
+      color: GrayText !important;
+    }
+    &:focus:disabled,
+    &:active:disabled {
+      outline: 2px solid Highlight;
+    }
+  }
+}