diff --git a/packages/components/src/form-toggle/style.scss b/packages/components/src/form-toggle/style.scss index 900874b59004b8..8ae46d23558276 100644 --- a/packages/components/src/form-toggle/style.scss +++ b/packages/components/src/form-toggle/style.scss @@ -24,10 +24,13 @@ $transition-duration: 0.2s; width: $toggle-width; height: $toggle-height; border-radius: math.div($toggle-height, 2); - transition: - $transition-duration background-color ease, - $transition-duration border-color ease; - @include reduce-motion("transition"); + + @media not (prefers-reduced-motion) { + transition: + $transition-duration background-color ease, + $transition-duration border-color ease; + } + overflow: hidden; // Windows High Contrast Mode @@ -39,8 +42,9 @@ $transition-duration: 0.2s; // Expand the border to fake a solid in Windows High Contrast Mode. border-top: #{ $toggle-height } solid transparent; - transition: $transition-duration opacity ease; - @include reduce-motion("transition"); + @media not (prefers-reduced-motion) { + transition: $transition-duration opacity ease; + } opacity: 0; } @@ -55,10 +59,13 @@ $transition-duration: 0.2s; width: $toggle-thumb-size; height: $toggle-thumb-size; border-radius: $radius-round; - transition: - $transition-duration transform ease, - $transition-duration background-color ease-out; - @include reduce-motion("transition"); + + @media not (prefers-reduced-motion) { + transition: + $transition-duration transform ease, + $transition-duration background-color ease-out; + } + background-color: $gray-900; box-shadow: $elevation-x-small;