@supports (view-transition-name: content) {
  :root {
    --page-transition-animation-duration: 300ms;
    --page-transition-animation-timing-function: cubic-bezier(0.465, 0.183, 0.153, 0.946);
  }

  #main-footer {
    contain: layout;
    view-transition-name: main-footer;
    z-index: 2;
  }

  @keyframes slide-out {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-20%);
    }
  }

  @keyframes slide-out-reverse {
    from {
      transform: translateX(-20%);
    }
    to {
      transform: translateX(0);
    }
  }

  @keyframes slide-in {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(0);
    }
  }

  @keyframes slide-in-reverse {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(100%);
    }
  }

  @keyframes flip {
    from {
      transform: translateX(0) rotateY(0deg);
    }
    to {
      transform: translateX(-100%) rotateY(-180deg);
    }
  }

  @keyframes flip-reverse {
    from {
      transform: translateX(0) rotateY(0deg);
    }
    to {
      transform: translateX(100%) rotateY(180deg);
    }
  }

  @keyframes scale-out {
    from {
      transform: translateZ(0);
      opacity: 1;
    }
    to {
      transform: translateZ(5000px);
      opacity: 0;
    }
  }

  @keyframes scale-in {
    from {
      transform: translateZ(-5000px);
      opacity: 0;
    }
    to {
      transform: translateZ(0);
      opacity: 1;
    }
  }

  @keyframes scale-out-reverse {
    from {
      transform: translateZ(5000px);
      opacity: 0;
    }
    to {
      transform: translateZ(0);
      opacity: 1;
    }
  }

  @keyframes scale-in-reverse {
    from {
      transform: translateZ(0);
      opacity: 1;
    }
    to {
      transform: translateZ(-15000px);
      opacity: 0;
    }
  }

  @keyframes opacity-front {
    0% {
      opacity: 1;
    }
    25% {
      opacity: 1
    }
    26% {
      opacity: 0;
    }
  }

  @keyframes opacity-back {
    0% {
      opacity: 0;
    }
    25% {
      opacity: 0
    }
    26% {
      opacity: 1;
    }
  }

  @keyframes scale-back {
    from {
      transform: translateZ(0);
    }
    to {
      transform: translateZ(-5000px);
    }
  }

  @keyframes scale-back-reverse {
    from {
      transform: translateZ(-5000px);
    }
    to {
      transform: translateZ(0);
    }
  }

  @media screen and (min-width: 1024px) {
    material-radiobutton[value="slide"],
    material-radiobutton[value="flip"] {
      display: none;
    }
  }

  @media screen and (max-width: 1024px) {
    ::view-transition-new(root),
    ::view-transition-old(root) {
      animation-duration: var(--page-transition-animation-duration);
      animation-timing-function: var(--page-transition-animation-timing-function);
      animation-direction: normal;
    }

    [data-transition="slide"]::view-transition-old(root) {
      animation-name: slide-out;
    }

    [data-transition="slide"]::view-transition-new(root) {
      animation-name: slide-in;
      mix-blend-mode: normal;
    }


    [data-transition="slide"].back-transition::view-transition-new(root) {
      animation-name: slide-out-reverse;
    }

    [data-transition="slide"].back-transition::view-transition-old(root) {
      animation-name: slide-in-reverse;
      mix-blend-mode: normal;
      z-index: 1;
    }

    [data-transition="slide"].reload-transition::view-transition-new(root) {
      animation-name: fade-in;
      animation-duration: calc(2 * var(--page-transition-animation-duration));
    }

    [data-transition="slide"].reload-transition::view-transition-old(root) {
      animation-name: fade-out;
    }

    /* FLIP */
    [data-transition="flip"]::view-transition-group(root) {
      perspective: 1000px;
    }

    [data-transition="flip"]::view-transition-image-pair(root) {
      transform-style: preserve-3d;
      transform-origin: center right;
      animation-name: flip;
    }

    [data-transition="flip"]::view-transition-new(root),
    [data-transition="flip"]::view-transition-old(root) {
      mix-blend-mode: normal;
      opacity: 1;
    }

    [data-transition="flip"]::view-transition-new(root) {
      transform: rotateY(180deg);
      animation-name: opacity-back;
    }
    [data-transition="flip"]::view-transition-old(root) {
      animation-name: opacity-front;
    }


    [data-transition="flip"].back-transition::view-transition-image-pair(root) {
      transform-origin: center left;
      animation-name: flip-reverse;
    }
  }

  /* SCALE */
  [data-transition="scale"]::view-transition-image-pair(root) {
    perspective: 10000px;
  }

  [data-transition="scale"]::view-transition-old(root) {
    animation-name: scale-out;
    z-index: 1;
  }

  [data-transition="scale"]::view-transition-new(root) {
    animation-name: scale-in;
  }

  [data-transition="scale"].back-transition::view-transition-new(root) {
    animation-name: scale-out-reverse;
    z-index: 1;
  }

  [data-transition="scale"].back-transition::view-transition-old(root) {
    animation-name: scale-in-reverse;
    mix-blend-mode: normal;
    z-index: 0;
  }

  /* SCALE-SLIDE */
  [data-transition="scale-slide"]::view-transition-image-pair(root) {
    perspective: 10000px;
  }

  [data-transition="scale-slide"]::view-transition-old(root) {
    animation-name: scale-back;
  }

  [data-transition="scale-slide"]::view-transition-new(root) {
    animation-name: slide-in;
    animation-delay: calc(var(--page-transition-animation-duration) * .8);
  }

  [data-transition="scale-slide"].back-transition::view-transition-new(root) {
    animation-name: scale-back-reverse;
    animation-delay: calc(var(--page-transition-animation-duration) * .8);
  }

  [data-transition="scale-slide"].back-transition::view-transition-old(root) {
    animation-name: slide-in-reverse;
    mix-blend-mode: normal;
    z-index: 1;
  }

  /* ENLARGING ICONS */
  html[data-transition="icon-enlarge"] {
    &::view-transition-group(main-footer) {
      z-index: 1;
    }

    &::view-transition-old(main-footer),
    &::view-transition-new(main-footer) {
      animation-name: none;
    }

    #installation-demo,
    #installation-demo-button {
      view-transition-name: installation-demo;
    }

    #offline-support-demo,
    #offline-support-demo-button {
      view-transition-name: offline-support-demo;
    }

    #shortcuts-demo,
    #shortcuts-demo-button {
      view-transition-name: shortcuts-demo;
    }

    #media-demo,
    #media-demo-button {
      view-transition-name: media-demo;
    }
    #geolocation-demo,
    #geolocation-demo-button {
      view-transition-name: geolocation-demo;
    }
    #notifications-demo,
    #notifications-demo-button {
      view-transition-name: notifications-demo;
    }
    #view-transitions-demo,
    #view-transitions-demo-button {
      view-transition-name: view-transitions-demo;
    }
    #file-system-demo,
    #file-system-demo-button {
      view-transition-name: file-system-demo;
    }
    #authentication-demo,
    #authentication-demo-button {
      view-transition-name: authentication-demo;
    }

    #protocol-handling-demo,
    #protocol-handling-demo-button {
      view-transition-name: protocol-handling-demo;
    }
    #file-handling-demo,
    #file-handling-demo-button {
      view-transition-name: file-handling-demo;
    }
    #contacts-demo,
    #contacts-demo-button {
      view-transition-name: contacts-demo;
    }
    #web-share-demo,
    #web-share-demo-button {
      view-transition-name: web-share-demo;
    }
    #barcode-demo,
    #barcode-demo-button {
      view-transition-name: barcode-demo;
    }
    #face-detection-demo,
    #face-detection-demo-button {
      view-transition-name: face-detection-demo;
    }
    #vibration-demo,
    #vibration-demo-button {
      view-transition-name: vibration-demo;
    }
    #audio-recording-demo,
    #audio-recording-demo-button {
      view-transition-name: audio-recording-demo;
    }
    #audio-demo,
    #audio-demo-button {
      view-transition-name: audio-demo;
    }
    #audiosession-demo,
    #audiosession-demo-button {
      view-transition-name: audiosession-demo;
    }
    #capture-handle-demo,
    #capture-handle-demo-button {
      view-transition-name: capture-handle-demo;
    }
    #background-sync-demo,
    #background-sync-demo-button {
      view-transition-name: background-sync-demo;
    }

    #element-capture-demo,
    #element-capture-demo-button {
      view-transition-name: element-capture-demo;
    }

    #background-fetch-demo,
    #background-fetch-demo-button {
      view-transition-name: background-fetch-demo;
    }
    #storage-demo,
    #storage-demo-button {
      view-transition-name: storage-demo;
    }
    #bluetooth-demo,
    #bluetooth-demo-button {
      view-transition-name: bluetooth-demo;
    }
    #nfc-demo,
    #nfc-demo-button {
      view-transition-name: nfc-demo;
    }
    #ar-vr-demo,
    #ar-vr-demo-button {
      view-transition-name: ar-vr-demo;
    }
    #payment-demo,
    #payment-demo-button {
      view-transition-name: payment-demo;
    }
    #wake-lock-demo,
    #wake-lock-demo-button {
      view-transition-name: wake-lock-demo;
    }
    #device-orientation-demo,
    #device-orientation-demo-button {
      view-transition-name: device-orientation-demo;
    }
    #device-motion-demo,
    #device-motion-demo-button {
      view-transition-name: device-motion-demo;
    }
    #network-info-demo,
    #network-info-demo-button {
      view-transition-name: network-info-demo;
    }
    #speech-synthesis-demo,
    #speech-synthesis-demo-button {
      view-transition-name: speech-synthesis-demo;
    }
    #speech-recognition-demo,
    #speech-recognition-demo-button {
      view-transition-name: speech-recognition-demo;
    }
    #multi-touch-demo,
    #multi-touch-demo-button {
      view-transition-name: multi-touch-demo;
    }

    #main-footer {
      view-transition-name: main-footer;
    }
  }

   /*** OVERRIDES ***/
  html, body {
    height: auto;
  }

  #main-content {
    height: auto;
  }

  #main-header, material-app-bar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    box-sizing: border-box;
  }

  #main-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
  }

  .view {
    position: static;
  }

  .view::after {
    display: none;
  }

  .view.next-screen {
    transform: translateX(0);
    opacity: 1;
  }

  .view.active + .view.next-screen,
  .view.next-screen + .view.next-screen {
    pointer-events: auto !important;
  }

  .view .content {
    margin-top: 60px;
    margin-bottom: 60px;
    height: auto;
    overflow-y: unset;
  }

  .network-status {
    top: 63px;
  }
}