textbook__page.scss

@import '../../../node_modules/carbon-components/scss/globals/scss/typography';
@import '../variables/colors.scss';
@import '../variables/settings.scss';
@import '../variables/mq.scss';
@import '../variables/fonts.scss';

body {
  max-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
}

main.body {
  padding: 0;
  margin: 0;
  max-height: 100%;
  overflow: hidden;
}

.c-textbook {
  display: flex;
  max-height: 100%;
  min-height: calc(100vh - $qiskit-navbar-height);
  overflow: hidden;
  position: relative;

  @include mq($until: medium) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: 
      "sidebar-mobile-menu utility-panel"
      "textbook-content textbook-content";
    position: relative;
  }

  &__page {
    grid-area: textbook-content;
    max-height: 100%;
    overflow: auto;
    display: flex;
    flex-direction: column;
    position: relative;
    max-width: none;
    flex: 1;
    gap: $spacing-05;
    
    @include mq($until: medium) {
      overflow: hidden;
    }

    &__error {
      display: flex;
      padding: $spacing-10 $spacing-13;
  
      @include mq($until: x-large) {
        padding: $spacing-10 $spacing-12;
      }

      @include mq($until: large) {
        padding: $spacing-09 $spacing-07;
      }

      @include mq($until: medium) {
        flex-direction: row;
        gap: 0;
        padding-left: $spacing-05;
        padding-right: 0;
      }

      @include mq($until: small) {
        flex-direction: column;
        padding: $spacing-06 $spacing-05;
      }
  
      &__container {
        position: absolute;

        @include mq($until: medium) {
          max-width: 18rem;
          position: relative;
        }

        @include mq($until: small) {
          max-width: initial;
        }
      }
  
      &__code {
        margin-bottom: $spacing-04;
      }
  
      &__message {
        margin-bottom: $spacing-06;
      }

      &__cta {
        .app-cta_ghost[datatest="error-page-cta"]{
          padding: $spacing-05;
          justify-content: space-between;
        }
    
        .app-cta_ghost .app-cta__icon {
          margin-right: $spacing-02;
        }
      }
  

      &__img {
        align-self: center;
        max-width: 47rem;

        @include mq($until: medium) {
          max-width: 50%;
        }

        @include mq($until: small) {
          max-width: initial;
        }
      }
    }
  }
  
  &__sidebar--hidden .c-textbook__page {
    @include mq($until: medium) {
      overflow: auto;
    }
  }
  
  .reveal-banner {
    z-index: auto;
    position: initial;
    display: inline-block;
    width: max-content;
  }
  
  .page__banner {
    height: $textbook-page-banner-height;
  }

  &__content {
    max-width: $content-max-width;
    padding: 0 $spacing-06 $spacing-05 $spacing-05;

    x-step {
      z-index: auto;
    }
  }
  
  .page-title {
    @include type-style('expressive-heading-05', $fluid: true);
    color: $text-color-dark;
    margin-top: $spacing-06;
    margin-bottom: $spacing-06;
    max-width: 70%;
  }

  &__utility-panel {
    grid-area: utility-panel;
    max-height: 100%;
    display: flex;
    
    q-utility-panel {
      flex: 1;
    }

    @include mq($from: medium) {
      position: absolute;
      top: 0;
      right: 0;
    }

    .utility-panel_open {
      @include mq($until: medium) {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
      }
    }
  }
}

// Fix text in code output SVGs
circle,
g,
image,
line,
path,
polyline,
use {
  transform-box: inherit;
  transform-origin: revert;
}