@layer seed-components {
  .seed-app-screen__root {
    --app-bar-offset: calc(var(--app-bar-height) + var(--seed-safe-area-top));
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    overflow: hidden;
  }

  .seed-app-screen__dim {
    z-index: var(--z-index-dim);
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }

  .seed-app-screen__layer {
    z-index: var(--z-index-layer);
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    overflow-y: scroll;
  }

  .seed-app-screen__layer::-webkit-scrollbar {
    display: none;
  }

  .seed-app-screen__layer:focus {
    outline: none;
  }

  .seed-app-screen__layer {
    background-color: var(--seed-color-bg-layer-default);
  }

  .seed-app-screen__edge {
    z-index: var(--z-index-edge);
    width: 20px;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
  }

  .seed-app-screen__root--theme_cupertino {
    --app-bar-height: 44px;
  }

  .seed-app-screen__root--theme_android {
    --app-bar-height: 56px;
  }

  .seed-app-screen__edge--theme_android {
    display: none;
  }

  .seed-app-screen__root--transitionStyle_slideFromRightIOS {
    --z-index-dim: calc(var(--z-index-base) + 0);
    --z-index-layer: calc(var(--z-index-base) + 2);
    --z-index-edge: calc(var(--z-index-base) + 4);
    --z-index-app-bar: calc(var(--z-index-base) + 7);
  }

  .seed-app-screen__layer--transitionStyle_slideFromRightIOS {
    transform: translate3d(0, 0, 0);
  }

  .seed-app-screen__dim--transitionStyle_slideFromRightIOS {
    background: var(--seed-color-bg-overlay);
    height: 100%;
  }

  .seed-app-screen__root--transitionStyle_fadeFromBottomAndroid {
    --z-index-dim: calc(var(--z-index-base) + 0);
    --z-index-layer: calc(var(--z-index-base) + 3);
    --z-index-edge: calc(var(--z-index-base) + 4);
    --z-index-app-bar: calc(var(--z-index-base) + 4);
  }

  .seed-app-screen__dim--transitionStyle_fadeFromBottomAndroid {
    background: linear-gradient(var(--seed-color-bg-overlay), #0000);
    height: 160px;
  }

  .seed-app-screen__layer--transitionStyle_fadeFromBottomAndroid {
    transform: translate3d(0, 0, 0);
  }

  .seed-app-screen__root--transitionStyle_fadeIn {
    --z-index-dim: calc(var(--z-index-base) + 0);
    --z-index-layer: calc(var(--z-index-base) + 3);
    --z-index-edge: calc(var(--z-index-base) + 4);
    --z-index-app-bar: calc(var(--z-index-base) + 4);
  }

  .seed-app-screen__dim--transitionStyle_fadeIn {
    display: none;
  }

  .seed-app-screen__layer--layerOffsetTop_safeArea {
    padding-top: var(--seed-safe-area-top);
  }

  .seed-app-screen__layer--layerOffsetTop_appBar {
    padding-top: var(--app-bar-offset);
  }

  .seed-app-screen__layer--layerOffsetBottom_safeArea {
    padding-bottom: var(--seed-safe-area-bottom);
  }

  .seed-app-screen__layer--tone_transparent-gradient_true:before {
    content: "";
    margin-bottom: calc(-1 * (66px + 400px + var(--seed-safe-area-top)));
    height: calc(66px + 400px + var(--seed-safe-area-top));
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(#0003 0%, #00000059 400px, #0000 100%);
    display: block;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
  }

  .seed-app-screen__layer--tone_transparent-gradient_true-layerOffsetBottom_none:before {
    transform: translateY(-400px);
  }

  .seed-app-screen__layer--tone_transparent-gradient_true-layerOffsetTop_safeArea:before {
    transform: translateY(calc(-400px - var(--seed-safe-area-top)));
  }

  .seed-app-screen__layer--tone_transparent-gradient_true-layerOffsetTop_appBar:before {
    transform: translateY(calc(-400px - var(--app-bar-offset)));
  }
}