@import '../../@theme/styles/themes';

:host {
  display: flex !important;
  flex-direction: row;
  justify-content: stretch;
  align-items: stretch;
  height: 100%;
}

.description-container, .diagram-container {
  display: flex;
}

.diagram-container {
  flex: 2 1 auto;
  align-items: center;
  min-width: 35rem;
}

.description-container {
  flex: 1 1 auto;
  max-width: 45rem;
  align-items: stretch;
  height: 100%;

  & > *:not(router-outlet) {
    height: 100%;
    width: 100%;
  }
}

@media (max-width : 991px) {
  :host {
    flex-direction: column;
    justify-content: flex-start;
    height: fit-content;

    .diagram-container {
      width: 100%;
      max-width: none;
      height: fit-content;
      margin: 0 auto;

      ngx-backend-integration-diagram {
        font-size: 2vw;
        height: 60vw;
        padding-top: 0;
      }
    }
  }
}