.main {
  --stage-title-height: 46px;
  --stage-detail-section-height: 40px;

  background-color: var(--white) !important;
  min-height: calc(var(--page-min-height) - 144px);
  height: calc(100vh - 144px);
  overflow: hidden;

  > div {
    position: relative !important;

    .stagesContainer,
    .terminalContainer {
      width: 100%;
      height: 100%;
    }

    .stagesContainer {
      .stagesHeader {
        height: var(--stage-title-height);
        align-items: center;
        padding: 0 var(--spacing-medium) 0 var(--spacing-xlarge);
        border-bottom: 1px solid var(--grey-200);

        span[data-stage-state] {
          width: 18px;
          height: 18px;
          display: inline-block;
          background-color: var(--grey-200);

          &[data-stage-state='success'] {
            background-color: var(--green-500);
          }

          &[data-stage-state='failed'] {
            background-color: var(--red-500);
          }

          &[data-stage-state='running'] {
            background-color: var(--yellow-500);
          }
        }
      }

      .stageSection {
        border-bottom: 1px solid var(--grey-200);
        padding: 0 0 0 var(--spacing-xlarge);
        cursor: pointer;

        &.expanded {
          .chevron {
            transform: rotate(90deg);
          }
        }

        .chevron {
          transition: transform 0.2s ease;
        }

        .sectionName {
          display: flex;
          align-items: center;
          min-height: var(--stage-title-height);
          padding-right: var(--spacing-medium);
        }

        .stageSectionDetails {
          cursor: pointer;
          height: var(--stage-detail-section-height);
          align-items: center;
          padding: 0;
          padding-left: var(--spacing-medium);
          margin-left: 32px;
          border-top-left-radius: 6px;
          border-bottom-left-radius: 6px;

          &:hover {
            .text {
              color: var(--primary-7);
            }
          }

          &.active {
            background: var(--primary-2);

            .text {
              font-weight: 600;
              color: var(--primary-7);
            }
          }

          &:last-of-type {
            margin-bottom: var(--spacing-small);
          }
        }
      }
    }

    .terminalContainer {
      overflow: hidden;
      background-color: var(--black);

      :global {
        .terminal.xterm {
          padding: var(--spacing-medium);
        }

        // .terminal-container {
        //   overflow: hidden;
        // }

        // .xterm .xterm-viewport {
        //   /* see : https://github.com/xtermjs/xterm.js/issues/3564#issuecomment-1004417440 */
        //   width: initial !important;
        // }
      }
    }
  }
}
