/* Styleguide */
.ThemeBundleEditor-stage {
  @apply fixed bottom-0 left-[var(--pageNav-w)] right-0 top-[--page-header-h] z-[100] translate-y-full flex-col border-s border-t bg-white transition-transform duration-300;

  /* Styleguide and its toggle button are hidden at small breakpoints */
  @apply hidden lg:flex;

  &.is-open {
    @apply translate-y-0;
  }
}

/* "Open styleguide" button */
.ThemeBundleEditor-top {
  @apply hidden pt-6 lg:blokk;
}
.ThemeBundleEditor-toggle {
  @apply hidden lg:btu-button lg:btu-button-gray lg:btu-button-md;
}

/* Frame that holds the styleguide itself */
.ThemeBundleEditor-stage-main {
  @apply size-full;

  iframe {
    @apply flex size-full;
  }
}

/* The buttons that appear above the stylgeuide frame */
.ThemeBundleEditor-stage-top {
  @apply flex w-full items-center justify-between bg-white px-4 py-3;

  > a {
    @apply btu-button btu-button-fill-none btu-button-gray before:btu-icon;
  }

  .ThemeBundleEditor-close {
    @apply before:btu-icon-chevron-left rtl:before:btu-icon-chevron-right;
  }

  .ThemeBundleEditor-openNewTab {
    @apply before:btu-icon-external-link;
  }
}

/* Carryover from v4 */
.Styleguide .Page.is-inIframe {
  @apply h-full;
}

/* Styles related to theme bundle edit form */
.Page.has-theme-styleguide {
  .ContentEdit-left {
    @apply grid grid-cols-subgrid;

    &:has(.Tab[data-tab='Styleguide']:not(.TC-unselected)) {
      @apply grid-rows-subgrid;
    }
  }

  .ContentEdit-main {
    &:has(.Tab[data-tab='Styleguide']:not(.TC-unselected)) {
      @apply grid-rows-subgrid;
    }
  }

  .CIG {
    @apply content-start;
  }

  .Tab[data-tab='Styleguide']:not(.TC-unselected) {
    --tab-bar-h: calc(theme(lineHeight.4) + theme(padding.6) + 1px);

    @apply -mx-6 flex h-[calc(100%_-_var(--tab-bar-h))] w-[calc(100%_+_2_*_theme(spacing.6))] flex-col overflow-clip;

    > .StyleguideFrame {
      @apply w-full flex-shrink-0 flex-grow;
    }

    > .Message {
      @apply flex-none;

      > a {
        @apply -order-1;
      }

      .Message-icon {
        @apply before:btu-icon-external-link;
      }
    }
  }
}
