.ThemeBundleEditor-stage {
  background: var(--color-white);
  bottom: 0;
  display: none;
  left: 0;
  position: fixed;
  right: 0;
  top: var(--Page-headerBottom);
  transform: translateY(100vh);
  transition: transform 0.3s ease-in-out;
  z-index: 100;
}

.ThemeBundleEditor-top {
  padding-top: var(--gap-xl);
}

.ThemeBundleEditor-toggle {
  display: none;
}

.ThemeBundleEditor-stage-main {
  display: flex;

  iframe {
    height: calc(
      100vh -
        calc(
          var(--Page-headerBottom) + (var(--gap-m) * 2) + var(--lineHeight-l)
        )
    );
    width: 100%;
  }
}

.ThemeBundleEditor-stage-top {
  display: flex;

  .ThemeBundleEditor-close {
    flex-grow: 1;
  }

  .ThemeBundleEditor-openNewTab {
    padding-right: var(--gap-l);

    &::before {
      content: 'open_in_new';
    }
  }
}

.Popup[data-popup-source-class*='ThemeBundle-edit'] .ContentEdit {
  display: block;

  .ContentEdit-bottom,
  .ContentEdit-right {
    display: none;
  }

  .ContentEdit-main {
    height: 100%;
  }

  .CIG {
    align-content: flex-start;
    height: 100%;
    overflow-y: auto;

    .TabBar-menuItem[data-tab='Styleguide'] {
      display: none;
    }
  }

  [data-tab='Styleguide'] {
    height: calc(100% - 3 * var(--gap-l));

    & > .StyleguideFrame {
      height: calc(100% - var(--Text-height) - var(--gap-m) * 2);
    }
  }
}

@media (@mq-m) {
  .Popup[data-popup-source-class*='ThemeBundle-edit'] .ContentEdit {
    display: grid;
    grid-template: 'left toolbar' 1fr ~'/' 1fr var(--ContentEdit-rightWidth) var(--ContentEdit-toolbarWidth);
  }
}

@media (@mq-l) {
  .ThemeBundleEditor-stage {
    display: block;

    &.is-open {
      transform: translateY(0);
    }
  }

  .ThemeBundleEditor-toggle {
    display: block;
  }
}

.Styleguide .Page.is-inIframe {
  height: 100%;
}
