@fluentui/web-components 3.0.0-rc.26 → 3.0.0-rc.28

package/dist/esm/avatar/avatar.styles.css

@@ -1,475 +1,480 @@
-
-  :host([hidden]){display:none}:host{display:inline-grid} :host {
-    position: relative;
-    place-items: center;
-    place-content: center;
-    grid-template: 1fr / 1fr;
-    flex-shrink: 0;
-    width: 32px;
-    height: 32px;
-    font-family: var(--fontFamilyBase);
-    font-weight: var(--fontWeightSemibold);
-    font-size: var(--fontSizeBase300);
-    border-radius: var(--borderRadiusCircular);
-    color: var(--colorNeutralForeground3);
-    background-color: var(--colorNeutralBackground6);
-    contain: layout style;
-  }
-
-  .monogram,
-  .default-icon {
-    grid-area: 1 / 1 / -1 / -1;
-  }
-
-  .monogram:empty {
-    display: none;
-  }
-
-  .default-slot:is(.has-slotted, :has-slotted) ~ .default-icon,
-  .default-slot:is(.has-slotted, :has-slotted) ~ .monogram,
-  :host(:is([name]):not([name=''])) .default-icon,
-  :host(:is([initials]):not([initials=''])) .default-icon {
-    display: none;
-  }
-
-  .default-icon,
-  ::slotted(svg) {
-    width: 20px;
-    height: 20px;
-    font-size: 20px;
-  }
-
-  ::slotted(img) {
-    box-sizing: border-box;
-    width: 100%;
-    height: 100%;
-    border-radius: var(--borderRadiusCircular);
-  }
-
-  ::slotted([slot='badge']) {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    box-shadow: 0 0 0 var(--strokeWidthThin) var(--colorNeutralBackground1);
-  }
-
-  :host([size='64']) ::slotted([slot='badge']),
-  :host([size='72']) ::slotted([slot='badge']),
-  :host([size='96']) ::slotted([slot='badge']),
-  :host([size='120']) ::slotted([slot='badge']),
-  :host([size='128']) ::slotted([slot='badge']) {
-    box-shadow: 0 0 0 var(--strokeWidthThick) var(--colorNeutralBackground1);
-  }
-
-  :host([size='16']),
-  :host([size='20']),
-  :host([size='24']) {
-    font-size: var(--fontSizeBase100);
-    font-weight: var(--fontWeightRegular);
-  }
-
-  :host([size='16']) {
-    width: 16px;
-    height: 16px;
-  }
-
-  :host([size='20']) {
-    width: 20px;
-    height: 20px;
-  }
-
-  :host([size='24']) {
-    width: 24px;
-    height: 24px;
-  }
-
-  :host([size='16']) .default-icon,
-  :host([size='16']) ::slotted(svg) {
-    width: 12px;
-    height: 12px;
-    font-size: 12px;
-  }
-
-  :host([size='20']) .default-icon,
-  :host([size='24']) .default-icon,
-  :host([size='20']) ::slotted(svg),
-  :host([size='24']) ::slotted(svg) {
-    width: 16px;
-    height: 16px;
-    font-size: 16px;
-  }
-
-  :host([size='28']) {
-    width: 28px;
-    height: 28px;
-    font-size: var(--fontSizeBase200);
-  }
-
-  :host([size='36']) {
-    width: 36px;
-    height: 36px;
-  }
-
-  :host([size='40']) {
-    width: 40px;
-    height: 40px;
-  }
-
-  :host([size='48']),
-  :host([size='56']) {
-    font-size: var(--fontSizeBase400);
-  }
-
-  :host([size='48']) {
-    width: 48px;
-    height: 48px;
-  }
-
-  :host([size='48']) .default-icon,
-  :host([size='48']) ::slotted(svg) {
-    width: 24px;
-    height: 24px;
-    font-size: 24px;
-  }
-
-  :host([size='56']) {
-    width: 56px;
-    height: 56px;
-  }
-
-  :host([size='56']) .default-icon,
-  :host([size='56']) ::slotted(svg) {
-    width: 28px;
-    height: 28px;
-    font-size: 28px;
-  }
-
-  :host([size='64']),
-  :host([size='72']),
-  :host([size='96']) {
-    font-size: var(--fontSizeBase500);
-  }
-
-  :host([size='64']) .default-icon,
-  :host([size='72']) .default-icon,
-  :host([size='64']) ::slotted(svg),
-  :host([size='72']) ::slotted(svg) {
-    width: 32px;
-    height: 32px;
-    font-size: 32px;
-  }
-
-  :host([size='64']) {
-    width: 64px;
-    height: 64px;
-  }
-
-  :host([size='72']) {
-    width: 72px;
-    height: 72px;
-  }
-
-  :host([size='96']) {
-    width: 96px;
-    height: 96px;
-  }
-
-  :host([size='96']) .default-icon,
-  :host([size='120']) .default-icon,
-  :host([size='128']) .default-icon,
-  :host([size='96']) ::slotted(svg),
-  :host([size='120']) ::slotted(svg),
-  :host([size='128']) ::slotted(svg) {
-    width: 48px;
-    height: 48px;
-    font-size: 48px;
-  }
-
-  :host([size='120']),
-  :host([size='128']) {
-    font-size: var(--fontSizeBase600);
-  }
-
-  :host([size='120']) {
-    width: 120px;
-    height: 120px;
-  }
-
-  :host([size='128']) {
-    width: 128px;
-    height: 128px;
-  }
-
-  :host([shape='square']) {
-    border-radius: var(--borderRadiusMedium);
-  }
-
-  :host([shape='square'][size='20']),
-  :host([shape='square'][size='24']) {
-    border-radius: var(--borderRadiusSmall);
-  }
-
-  :host([shape='square'][size='56']),
-  :host([shape='square'][size='64']),
-  :host([shape='square'][size='72']) {
-    border-radius: var(--borderRadiusLarge);
-  }
-  :host([shape='square'][size='96']),
-  :host([shape='square'][size='120']),
-  :host([shape='square'][size='128']) {
-    border-radius: var(--borderRadiusXLarge);
-  }
-
-  :host([data-color='brand']) {
-    color: var(--colorNeutralForegroundStaticInverted);
-    background-color: var(--colorBrandBackgroundStatic);
-  }
-
-  :host([data-color='dark-red']) {
-    color: var(--colorPaletteDarkRedForeground2);
-    background-color: var(--colorPaletteDarkRedBackground2);
-  }
-
-  :host([data-color='cranberry']) {
-    color: var(--colorPaletteCranberryForeground2);
-    background-color: var(--colorPaletteCranberryBackground2);
-  }
-
-  :host([data-color='red']) {
-    color: var(--colorPaletteRedForeground2);
-    background-color: var(--colorPaletteRedBackground2);
-  }
-
-  :host([data-color='pumpkin']) {
-    color: var(--colorPalettePumpkinForeground2);
-    background-color: var(--colorPalettePumpkinBackground2);
-  }
-
-  :host([data-color='peach']) {
-    color: var(--colorPalettePeachForeground2);
-    background-color: var(--colorPalettePeachBackground2);
-  }
-
-  :host([data-color='marigold']) {
-    color: var(--colorPaletteMarigoldForeground2);
-    background-color: var(--colorPaletteMarigoldBackground2);
-  }
-
-  :host([data-color='gold']) {
-    color: var(--colorPaletteGoldForeground2);
-    background-color: var(--colorPaletteGoldBackground2);
-  }
-
-  :host([data-color='brass']) {
-    color: var(--colorPaletteBrassForeground2);
-    background-color: var(--colorPaletteBrassBackground2);
-  }
-
-  :host([data-color='brown']) {
-    color: var(--colorPaletteBrownForeground2);
-    background-color: var(--colorPaletteBrownBackground2);
-  }
-
-  :host([data-color='forest']) {
-    color: var(--colorPaletteForestForeground2);
-    background-color: var(--colorPaletteForestBackground2);
-  }
-
-  :host([data-color='seafoam']) {
-    color: var(--colorPaletteSeafoamForeground2);
-    background-color: var(--colorPaletteSeafoamBackground2);
-  }
-
-  :host([data-color='dark-green']) {
-    color: var(--colorPaletteDarkGreenForeground2);
-    background-color: var(--colorPaletteDarkGreenBackground2);
-  }
-
-  :host([data-color='light-teal']) {
-    color: var(--colorPaletteLightTealForeground2);
-    background-color: var(--colorPaletteLightTealBackground2);
-  }
-
-  :host([data-color='teal']) {
-    color: var(--colorPaletteTealForeground2);
-    background-color: var(--colorPaletteTealBackground2);
-  }
-
-  :host([data-color='steel']) {
-    color: var(--colorPaletteSteelForeground2);
-    background-color: var(--colorPaletteSteelBackground2);
-  }
-
-  :host([data-color='blue']) {
-    color: var(--colorPaletteBlueForeground2);
-    background-color: var(--colorPaletteBlueBackground2);
-  }
-
-  :host([data-color='royal-blue']) {
-    color: var(--colorPaletteRoyalBlueForeground2);
-    background-color: var(--colorPaletteRoyalBlueBackground2);
-  }
-
-  :host([data-color='cornflower']) {
-    color: var(--colorPaletteCornflowerForeground2);
-    background-color: var(--colorPaletteCornflowerBackground2);
-  }
-
-  :host([data-color='navy']) {
-    color: var(--colorPaletteNavyForeground2);
-    background-color: var(--colorPaletteNavyBackground2);
-  }
-
-  :host([data-color='lavender']) {
-    color: var(--colorPaletteLavenderForeground2);
-    background-color: var(--colorPaletteLavenderBackground2);
-  }
-
-  :host([data-color='purple']) {
-    color: var(--colorPalettePurpleForeground2);
-    background-color: var(--colorPalettePurpleBackground2);
-  }
-
-  :host([data-color='grape']) {
-    color: var(--colorPaletteGrapeForeground2);
-    background-color: var(--colorPaletteGrapeBackground2);
-  }
-
-  :host([data-color='lilac']) {
-    color: var(--colorPaletteLilacForeground2);
-    background-color: var(--colorPaletteLilacBackground2);
-  }
-
-  :host([data-color='pink']) {
-    color: var(--colorPalettePinkForeground2);
-    background-color: var(--colorPalettePinkBackground2);
-  }
-
-  :host([data-color='magenta']) {
-    color: var(--colorPaletteMagentaForeground2);
-    background-color: var(--colorPaletteMagentaBackground2);
-  }
-
-  :host([data-color='plum']) {
-    color: var(--colorPalettePlumForeground2);
-    background-color: var(--colorPalettePlumBackground2);
-  }
-
-  :host([data-color='beige']) {
-    color: var(--colorPaletteBeigeForeground2);
-    background-color: var(--colorPaletteBeigeBackground2);
-  }
-
-  :host([data-color='mink']) {
-    color: var(--colorPaletteMinkForeground2);
-    background-color: var(--colorPaletteMinkBackground2);
-  }
-
-  :host([data-color='platinum']) {
-    color: var(--colorPalettePlatinumForeground2);
-    background-color: var(--colorPalettePlatinumBackground2);
-  }
-
-  :host([data-color='anchor']) {
-    color: var(--colorPaletteAnchorForeground2);
-    background-color: var(--colorPaletteAnchorBackground2);
-  }
-
+:host([hidden]) {
+  display: none;
+}
+:host {
+  display: inline-grid;
+}
+:host {
+  position: relative;
+  place-items: center;
+  place-content: center;
+  grid-template: 1fr / 1fr;
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  font-family: var(--fontFamilyBase);
+  font-weight: var(--fontWeightSemibold);
+  font-size: var(--fontSizeBase300);
+  border-radius: var(--borderRadiusCircular);
+  color: var(--colorNeutralForeground3);
+  background-color: var(--colorNeutralBackground6);
+  contain: layout style;
+}
+
+.monogram,
+.default-icon {
+  grid-area: 1 / 1 / -1 / -1;
+}
+
+.monogram:empty {
+  display: none;
+}
+
+.default-slot:is(.has-slotted, :has-slotted) ~ .default-icon,
+.default-slot:is(.has-slotted, :has-slotted) ~ .monogram,
+:host(:is([name]):not([name=''])) .default-icon,
+:host(:is([initials]):not([initials=''])) .default-icon {
+  display: none;
+}
+
+.default-icon,
+::slotted(svg) {
+  width: 20px;
+  height: 20px;
+  font-size: 20px;
+}
+
+::slotted(img) {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--borderRadiusCircular);
+}
+
+::slotted([slot='badge']) {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  box-shadow: 0 0 0 var(--strokeWidthThin) var(--colorNeutralBackground1);
+}
+
+:host([size='64']) ::slotted([slot='badge']),
+:host([size='72']) ::slotted([slot='badge']),
+:host([size='96']) ::slotted([slot='badge']),
+:host([size='120']) ::slotted([slot='badge']),
+:host([size='128']) ::slotted([slot='badge']) {
+  box-shadow: 0 0 0 var(--strokeWidthThick) var(--colorNeutralBackground1);
+}
+
+:host([size='16']),
+:host([size='20']),
+:host([size='24']) {
+  font-size: var(--fontSizeBase100);
+  font-weight: var(--fontWeightRegular);
+}
+
+:host([size='16']) {
+  width: 16px;
+  height: 16px;
+}
+
+:host([size='20']) {
+  width: 20px;
+  height: 20px;
+}
+
+:host([size='24']) {
+  width: 24px;
+  height: 24px;
+}
+
+:host([size='16']) .default-icon,
+:host([size='16']) ::slotted(svg) {
+  width: 12px;
+  height: 12px;
+  font-size: 12px;
+}
+
+:host([size='20']) .default-icon,
+:host([size='24']) .default-icon,
+:host([size='20']) ::slotted(svg),
+:host([size='24']) ::slotted(svg) {
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+}
+
+:host([size='28']) {
+  width: 28px;
+  height: 28px;
+  font-size: var(--fontSizeBase200);
+}
+
+:host([size='36']) {
+  width: 36px;
+  height: 36px;
+}
+
+:host([size='40']) {
+  width: 40px;
+  height: 40px;
+}
+
+:host([size='48']),
+:host([size='56']) {
+  font-size: var(--fontSizeBase400);
+}
+
+:host([size='48']) {
+  width: 48px;
+  height: 48px;
+}
+
+:host([size='48']) .default-icon,
+:host([size='48']) ::slotted(svg) {
+  width: 24px;
+  height: 24px;
+  font-size: 24px;
+}
+
+:host([size='56']) {
+  width: 56px;
+  height: 56px;
+}
+
+:host([size='56']) .default-icon,
+:host([size='56']) ::slotted(svg) {
+  width: 28px;
+  height: 28px;
+  font-size: 28px;
+}
+
+:host([size='64']),
+:host([size='72']),
+:host([size='96']) {
+  font-size: var(--fontSizeBase500);
+}
+
+:host([size='64']) .default-icon,
+:host([size='72']) .default-icon,
+:host([size='64']) ::slotted(svg),
+:host([size='72']) ::slotted(svg) {
+  width: 32px;
+  height: 32px;
+  font-size: 32px;
+}
+
+:host([size='64']) {
+  width: 64px;
+  height: 64px;
+}
+
+:host([size='72']) {
+  width: 72px;
+  height: 72px;
+}
+
+:host([size='96']) {
+  width: 96px;
+  height: 96px;
+}
+
+:host([size='96']) .default-icon,
+:host([size='120']) .default-icon,
+:host([size='128']) .default-icon,
+:host([size='96']) ::slotted(svg),
+:host([size='120']) ::slotted(svg),
+:host([size='128']) ::slotted(svg) {
+  width: 48px;
+  height: 48px;
+  font-size: 48px;
+}
+
+:host([size='120']),
+:host([size='128']) {
+  font-size: var(--fontSizeBase600);
+}
+
+:host([size='120']) {
+  width: 120px;
+  height: 120px;
+}
+
+:host([size='128']) {
+  width: 128px;
+  height: 128px;
+}
+
+:host([shape='square']) {
+  border-radius: var(--borderRadiusMedium);
+}
+
+:host([shape='square'][size='20']),
+:host([shape='square'][size='24']) {
+  border-radius: var(--borderRadiusSmall);
+}
+
+:host([shape='square'][size='56']),
+:host([shape='square'][size='64']),
+:host([shape='square'][size='72']) {
+  border-radius: var(--borderRadiusLarge);
+}
+:host([shape='square'][size='96']),
+:host([shape='square'][size='120']),
+:host([shape='square'][size='128']) {
+  border-radius: var(--borderRadiusXLarge);
+}
+
+:host([data-color='brand']) {
+  color: var(--colorNeutralForegroundStaticInverted);
+  background-color: var(--colorBrandBackgroundStatic);
+}
+
+:host([data-color='dark-red']) {
+  color: var(--colorPaletteDarkRedForeground2);
+  background-color: var(--colorPaletteDarkRedBackground2);
+}
+
+:host([data-color='cranberry']) {
+  color: var(--colorPaletteCranberryForeground2);
+  background-color: var(--colorPaletteCranberryBackground2);
+}
+
+:host([data-color='red']) {
+  color: var(--colorPaletteRedForeground2);
+  background-color: var(--colorPaletteRedBackground2);
+}
+
+:host([data-color='pumpkin']) {
+  color: var(--colorPalettePumpkinForeground2);
+  background-color: var(--colorPalettePumpkinBackground2);
+}
+
+:host([data-color='peach']) {
+  color: var(--colorPalettePeachForeground2);
+  background-color: var(--colorPalettePeachBackground2);
+}
+
+:host([data-color='marigold']) {
+  color: var(--colorPaletteMarigoldForeground2);
+  background-color: var(--colorPaletteMarigoldBackground2);
+}
+
+:host([data-color='gold']) {
+  color: var(--colorPaletteGoldForeground2);
+  background-color: var(--colorPaletteGoldBackground2);
+}
+
+:host([data-color='brass']) {
+  color: var(--colorPaletteBrassForeground2);
+  background-color: var(--colorPaletteBrassBackground2);
+}
+
+:host([data-color='brown']) {
+  color: var(--colorPaletteBrownForeground2);
+  background-color: var(--colorPaletteBrownBackground2);
+}
+
+:host([data-color='forest']) {
+  color: var(--colorPaletteForestForeground2);
+  background-color: var(--colorPaletteForestBackground2);
+}
+
+:host([data-color='seafoam']) {
+  color: var(--colorPaletteSeafoamForeground2);
+  background-color: var(--colorPaletteSeafoamBackground2);
+}
+
+:host([data-color='dark-green']) {
+  color: var(--colorPaletteDarkGreenForeground2);
+  background-color: var(--colorPaletteDarkGreenBackground2);
+}
+
+:host([data-color='light-teal']) {
+  color: var(--colorPaletteLightTealForeground2);
+  background-color: var(--colorPaletteLightTealBackground2);
+}
+
+:host([data-color='teal']) {
+  color: var(--colorPaletteTealForeground2);
+  background-color: var(--colorPaletteTealBackground2);
+}
+
+:host([data-color='steel']) {
+  color: var(--colorPaletteSteelForeground2);
+  background-color: var(--colorPaletteSteelBackground2);
+}
+
+:host([data-color='blue']) {
+  color: var(--colorPaletteBlueForeground2);
+  background-color: var(--colorPaletteBlueBackground2);
+}
+
+:host([data-color='royal-blue']) {
+  color: var(--colorPaletteRoyalBlueForeground2);
+  background-color: var(--colorPaletteRoyalBlueBackground2);
+}
+
+:host([data-color='cornflower']) {
+  color: var(--colorPaletteCornflowerForeground2);
+  background-color: var(--colorPaletteCornflowerBackground2);
+}
+
+:host([data-color='navy']) {
+  color: var(--colorPaletteNavyForeground2);
+  background-color: var(--colorPaletteNavyBackground2);
+}
+
+:host([data-color='lavender']) {
+  color: var(--colorPaletteLavenderForeground2);
+  background-color: var(--colorPaletteLavenderBackground2);
+}
+
+:host([data-color='purple']) {
+  color: var(--colorPalettePurpleForeground2);
+  background-color: var(--colorPalettePurpleBackground2);
+}
+
+:host([data-color='grape']) {
+  color: var(--colorPaletteGrapeForeground2);
+  background-color: var(--colorPaletteGrapeBackground2);
+}
+
+:host([data-color='lilac']) {
+  color: var(--colorPaletteLilacForeground2);
+  background-color: var(--colorPaletteLilacBackground2);
+}
+
+:host([data-color='pink']) {
+  color: var(--colorPalettePinkForeground2);
+  background-color: var(--colorPalettePinkBackground2);
+}
+
+:host([data-color='magenta']) {
+  color: var(--colorPaletteMagentaForeground2);
+  background-color: var(--colorPaletteMagentaBackground2);
+}
+
+:host([data-color='plum']) {
+  color: var(--colorPalettePlumForeground2);
+  background-color: var(--colorPalettePlumBackground2);
+}
+
+:host([data-color='beige']) {
+  color: var(--colorPaletteBeigeForeground2);
+  background-color: var(--colorPaletteBeigeBackground2);
+}
+
+:host([data-color='mink']) {
+  color: var(--colorPaletteMinkForeground2);
+  background-color: var(--colorPaletteMinkBackground2);
+}
+
+:host([data-color='platinum']) {
+  color: var(--colorPalettePlatinumForeground2);
+  background-color: var(--colorPalettePlatinumBackground2);
+}
+
+:host([data-color='anchor']) {
+  color: var(--colorPaletteAnchorForeground2);
+  background-color: var(--colorPaletteAnchorBackground2);
+}
+
+:host([active]) {
+  /* Work-around for text pixel snapping at the end of the animation */
+  transform: perspective(1px);
+  transition-property: transform, opacity;
+  transition-duration: var(--durationUltraSlow), var(--durationFaster);
+  transition-delay: var(--curveEasyEaseMax), var(--curveLinear);
+}
+
+:host([active])::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  border-radius: inherit;
+  transition-property: margin, opacity;
+  transition-duration: var(--durationUltraSlow), var(--durationSlower);
+  transition-delay: var(--curveEasyEaseMax), var(--curveLinear);
+}
+:host([active])::before {
+  box-shadow: var(--shadow8);
+  border-style: solid;
+  border-color: var(--colorBrandBackgroundStatic);
+}
+
+:host([active][appearance='shadow'])::before {
+  border-style: none;
+  border-color: none;
+}
+
+:host([active]:not([appearance='shadow']))::before {
+  margin: calc(-2 * var(--strokeWidthThick));
+  border-width: var(--strokeWidthThick);
+}
+
+:host([size='56'][active]:not([appearance='shadow']))::before,
+:host([size='64'][active]:not([appearance='shadow']))::before {
+  margin: calc(-2 * var(--strokeWidthThicker));
+  border-width: var(--strokeWidthThicker);
+}
+
+:host([size='72'][active]:not([appearance='shadow']))::before,
+:host([size='96'][active]:not([appearance='shadow']))::before,
+:host([size='120'][active]:not([appearance='shadow']))::before,
+:host([size='128'][active]:not([appearance='shadow']))::before {
+  margin: calc(-2 * var(--strokeWidthThickest));
+  border-width: var(--strokeWidthThickest);
+}
+
+:host([size='20'][active][appearance])::before,
+:host([size='24'][active][appearance])::before,
+:host([size='28'][active][appearance])::before {
+  box-shadow: var(--shadow4);
+}
+
+:host([size='56'][active][appearance])::before,
+:host([size='64'][active][appearance])::before {
+  box-shadow: var(--shadow16);
+}
+
+:host([size='72'][active][appearance])::before,
+:host([size='96'][active][appearance])::before,
+:host([size='120'][active][appearance])::before,
+:host([size='128'][active][appearance])::before {
+  box-shadow: var(--shadow28);
+}
+
+:host([active][appearance='ring'])::before {
+  box-shadow: none;
+}
+
+:host([active='inactive']) {
+  opacity: 0.8;
+  transform: scale(0.875);
+  transition-property: transform, opacity;
+  transition-duration: var(--durationUltraSlow), var(--durationFaster);
+  transition-delay: var(--curveDecelerateMin), var(--curveLinear);
+}
+
+:host([active='inactive'])::before {
+  margin: 0;
+  opacity: 0;
+  transition-property: margin, opacity;
+  transition-duration: var(--durationUltraSlow), var(--durationSlower);
+  transition-delay: var(--curveDecelerateMin), var(--curveLinear);
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
   :host([active]) {
-    /* Work-around for text pixel snapping at the end of the animation */
-    transform: perspective(1px);
-    transition-property: transform, opacity;
-    transition-duration: var(--durationUltraSlow), var(--durationFaster);
-    transition-delay: var(--curveEasyEaseMax), var(--curveLinear);
+    transition-duration: 0.01ms;
   }
 
   :host([active])::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    border-radius: inherit;
-    transition-property: margin, opacity;
-    transition-duration: var(--durationUltraSlow), var(--durationSlower);
-    transition-delay: var(--curveEasyEaseMax), var(--curveLinear);
-  }
-  :host([active])::before {
-    box-shadow: var(--shadow8);
-    border-style: solid;
-    border-color: var(--colorBrandBackgroundStatic);
-  }
-
-  :host([active][appearance='shadow'])::before {
-    border-style: none;
-    border-color: none;
-  }
-
-  :host([active]:not([appearance='shadow']))::before {
-    margin: calc(-2 * var(--strokeWidthThick));
-    border-width: var(--strokeWidthThick);
-  }
-
-  :host([size='56'][active]:not([appearance='shadow']))::before,
-  :host([size='64'][active]:not([appearance='shadow']))::before {
-    margin: calc(-2 * var(--strokeWidthThicker));
-    border-width: var(--strokeWidthThicker);
-  }
-
-  :host([size='72'][active]:not([appearance='shadow']))::before,
-  :host([size='96'][active]:not([appearance='shadow']))::before,
-  :host([size='120'][active]:not([appearance='shadow']))::before,
-  :host([size='128'][active]:not([appearance='shadow']))::before {
-    margin: calc(-2 * var(--strokeWidthThickest));
-    border-width: var(--strokeWidthThickest);
-  }
-
-  :host([size='20'][active][appearance])::before,
-  :host([size='24'][active][appearance])::before,
-  :host([size='28'][active][appearance])::before {
-    box-shadow: var(--shadow4);
-  }
-
-  :host([size='56'][active][appearance])::before,
-  :host([size='64'][active][appearance])::before {
-    box-shadow: var(--shadow16);
-  }
-
-  :host([size='72'][active][appearance])::before,
-  :host([size='96'][active][appearance])::before,
-  :host([size='120'][active][appearance])::before,
-  :host([size='128'][active][appearance])::before {
-    box-shadow: var(--shadow28);
-  }
-
-  :host([active][appearance='ring'])::before {
-    box-shadow: none;
-  }
-
-  :host([active='inactive']) {
-    opacity: 0.8;
-    transform: scale(0.875);
-    transition-property: transform, opacity;
-    transition-duration: var(--durationUltraSlow), var(--durationFaster);
-    transition-delay: var(--curveDecelerateMin), var(--curveLinear);
-  }
-
-  :host([active='inactive'])::before {
-    margin: 0;
-    opacity: 0;
-    transition-property: margin, opacity;
-    transition-duration: var(--durationUltraSlow), var(--durationSlower);
-    transition-delay: var(--curveDecelerateMin), var(--curveLinear);
-  }
-
-  @media screen and (prefers-reduced-motion: reduce) {
-    :host([active]) {
-      transition-duration: 0.01ms;
-    }
-
-    :host([active])::before {
-      transition-duration: 0.01ms;
-      transition-delay: 0.01ms;
-    }
+    transition-duration: 0.01ms;
+    transition-delay: 0.01ms;
   }
+}