:root {
  --focus-color: #097efb;
  --focus-color-dark-bg: #3b99fc;
}
@media (prefers-color-scheme: dark) {
  :root {
    --focus-color: #3b99fc;
    --focus-color-dark-bg: #097efb;
  }
}
/*
 * This file contains generic CSS that pertains to the 
 * component, including general CSS code to pause CSS
 * transitions and animations as well as code to 
 * pause animated GIFs. For CSS code specific to the
 * Enable demo page of this control, see 
 * pause-animation-control.less in the enable-a11y 
 * git repository.
 */
.pause-anim-control__checkbox {
  outline-offset: 3px;
  margin: 0 0 0 14px;
}
.play-pause-anim__background-pill {
  font-size: 0.875rem;
  background-color: #2b2929;
  border-radius: 25px;
  display: inline-flex;
  align-items: center;
}
@media only screen and (min-width: 720px) and (max-width: 959px), only screen and (min-width: 960px) {
  .play-pause-anim__background-pill {
    font-size: 1.125rem;
  }
}
.play-pause-anim__checkbox-container {
  align-items: center;
  color: white;
  padding: 20px 0;
  background-color: #5d5c5c;
  white-space: nowrap;
  text-align: center;
  display: flex;
  flex-direction: row;
  margin: 0 64px 0 20px;
}
@media only screen and (min-width: 960px) {
  .play-pause-anim__checkbox-container {
    margin: 0;
  }
}
.play-pause-anim__checkbox-container label {
  cursor: pointer;
  padding: 10px 12px;
}
@media only screen and (min-width: 960px) {
  .play-pause-anim__checkbox-container label {
    padding: 10px 20px;
  }
}
.play-pause-anim__checkbox-container .pause-button {
  width: 0px;
  height: 25px;
  display: inline-block;
  margin: 0px 10px 0 0;
}
@media only screen and (min-width: 720px) {
  .play-pause-anim__checkbox-container .pause-button {
    width: 25px;
  }
}
.play-pause-anim__checkbox-container a {
  color: #ccccff;
}
.pause-anim-control__gif--animated,
.pause-anim-control__gif--still {
  max-width: 100%;
}
.pause-anim-control__gif--animated {
  display: initial;
}
.pause-anim-control__gif--still {
  display: none;
}
/*
 * From Bruce Lawson's awesome blog post
 * https://brucelawson.co.uk/2021/prefers-reduced-motion-and-browser-defaults/
 */
@media (prefers-reduced-motion: reduce) {
  body:not(.pause-anim-control__prefers-motion) *,
  body:not(.pause-anim-control__prefers-motion) ::before,
  body:not(.pause-anim-control__prefers-motion) ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
  body:not(.pause-anim-control__prefers-motion) .pause-anim-control__gif--animated {
    display: none;
  }
  body:not(.pause-anim-control__prefers-motion) .pause-anim-control__gif--still {
    display: initial;
  }
}
body.pause-anim-control__prefers-reduced-motion *,
body.pause-anim-control__prefers-reduced-motion ::before,
body.pause-anim-control__prefers-reduced-motion ::after {
  animation-delay: -1ms !important;
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  background-attachment: initial !important;
  scroll-behavior: auto !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
}
body.pause-anim-control__prefers-reduced-motion .pause-anim-control__gif--animated {
  display: none;
}
body.pause-anim-control__prefers-reduced-motion .pause-anim-control__gif--still {
  display: initial;
}
/*# sourceMappingURL=pause-anim-control.css.map */