@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%;

  ::ng-deep & > *:last-child {
    height: 100%;
    width: 100%;
  }
}

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

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

    .description-container {
      padding-bottom: 1.5rem;
    }

    .diagram-container {
      padding-bottom: 1.5rem;
      ::ng-deep ngx-backend-integration-diagram {
        font-size: 2vw;
        height: fit-content;
        padding-top: 0;

        & > * {
          height: fit-content;
          position: static !important;
        }
      }
    }
  }
}