/*
 * Copyright 2023 Harness, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import 'src/utils/utils';

.main {
  --stage-title-height: 50px;
  --stage-title-font: 14px;
  --stage-title-color: var(--grey-700);
  --stage-title-weight: 500;
  --stage-detail-section-height: 48px;
  --log-content-header-height: 64px;

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

  > div {
    position: relative !important;

    .menu {
      overflow: auto;
    }

    .menu,
    .content {
      width: 100%;
      height: 100%;
    }
    .leftPaneContent {
      align-items: center !important;
      display: flex;
      flex-direction: column;
      background: var(--primary-bg);
      .leftPaneMenuItem {
        width: 350px;
        border-radius: 8px;
        box-shadow: 0px 0.5px 2px 0px rgba(96, 97, 112, 0.16), 0px 0px 1px 0px rgba(40, 41, 61, 0.08);
        background: var(--grey-0);

        &.expanded {
          .chevron {
            transform: rotate(90deg) !important;
          }
          > .layout {
            background-color: var(--grey-50);

            height: fit-content !important;
            .bp3-popover-wrapper {
              .bp3-popover-target {
                .uid {
                  color: var(--grey-600) !important;
                  font-weight: 500 !important;
                  font-size: 13px !important;
                }
              }
            }
          }

          .checkMenuItemContainer {
            > .menuItem {
              padding-left: var(--spacing-xxlarge);
              .layout {
                border-radius: 100px 0px 0px 100px;
                &:hover,
                &.selected {
                  background-color: #e5faff;
                }

                &.selected .uid {
                  color: var(--primary-7) !important;
                }
              }
            }
            &:nth-child(2) {
              padding-top: var(--spacing-small) !important;
            }
            &:last-child {
              padding-bottom: var(--spacing-small) !important;
            }
            &:nth-child(2):last-child {
              padding-top: var(--spacing-small) !important;
              padding-bottom: var(--spacing-small) !important;
            }
          }

          .menuItem {
            border-bottom: unset !important;
            > .layout {
              --stage-title-height: 36px;
              --stage-title-font: 13px !important;
              --stage-title-color: var(--grey-600) !important;
              --stage-title-weight: 400 !important;
              padding-left: var(--spacing-large);
              padding-right: var(--spacing-xxxlarge);
              border-bottom: unset !important;
              .bp3-popover-wrapper {
                .bp3-popover-target {
                  .uid {
                    color: var(--grey-600) !important;
                    font-weight: 400 !important;
                    font-size: 13px !important;
                  }
                }
              }
              > .uid {
                color: var(--grey-600) !important;
                font-weight: 400 !important;
                font-size: 13px !important;
              }
            }
          }
        }
      }
    }

    .menu {
      .menuItem {
        border-bottom: 1px solid var(--grey-100);

        .layout {
          display: flex;
          align-items: center;
          min-height: var(--stage-title-height);
          padding: 0 var(--spacing-medium) 0 var(--spacing-xlarge);
          border-bottom: 1px solid var(--grey-100);

          &.forPipeline {
            padding-left: 18px;
          }

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

          .chevron {
            transition: transform 0.2s ease;
          }

          &:hover,
          &.selected {
            background-color: var(--primary-1);
          }

          &.selected .uid {
            color: var(--primary-7) !important;
          }

          .uid {
            color: var(--stage-title-color);
            font-weight: var(--stage-title-weight);
            font-size: var(--stage-title-font);
          }
        }

        .subMenu {
          cursor: pointer;
          height: 38px;
          align-items: center;
          padding: 0;
          padding-left: var(--spacing-small);
          margin-left: var(--spacing-xlarge);
          border-top-left-radius: 6px;
          border-bottom-left-radius: 6px;

          .text {
            font-size: 13px;
            font-weight: 400;
            color: var(--grey-800);
          }

          &:hover,
          &.selected {
            background-color: var(--grey-100);

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

          &.selected .text {
            font-weight: 600;
          }

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

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

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

    .content {
      background-color: var(--black);
      overflow: auto;

      &.markdown {
        :global {
          .wmde-markdown {
            background-color: transparent !important;
          }
        }

        padding: 0 var(--spacing-large) var(--spacing-medium);
      }

      &.terminal {
        .header {
          padding: var(--spacing-medium) var(--spacing-large) 0;
        }

        span[data-icon='execution-success'] svg {
          circle {
            color: transparent !important;
          }
        }
      }

      .header {
        padding-top: var(--spacing-medium);
        position: sticky;
        top: 0;
        background-color: var(--black);
        height: var(--log-content-header-height);
        z-index: 3;

        .headerLayout {
          border-bottom: 1px solid var(--grey-800);
          padding-bottom: var(--spacing-medium);
          align-items: center;
        }
      }

      .markdownContainer {
        padding-top: var(--spacing-medium);
        padding-left: var(--spacing-small);
      }

      .logViewer {
        padding: var(--spacing-medium) var(--spacing-medium) var(--spacing-medium) var(--spacing-xxlarge);
      }
    }
  }
}

.status {
  align-self: center;

  &.invert {
    filter: invert(100%);
  }
}

.noShrink {
  flex-shrink: inherit;
}

.pipelineStages {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 8px !important;

  &.hidden {
    display: none;
  }

  .spinner {
    padding: var(--spacing-small) 0 var(--spacing-xlarge);
    text-align: center;
  }
}

.pipelineSteps {
  padding: 10px 20px 0 !important;
  display: flex;
  flex-direction: column;
  gap: 5px;

  &::before {
    content: '';
    height: 10px;
    width: 100%;
    background-color: var(--black);
    position: absolute;
    top: 64px;
    z-index: 1;
  }

  .stepContainer {
    display: flex;
    flex-direction: column;
    word-break: break-all;
  }

  .stepHeader {
    display: flex;
    align-items: center;
    min-height: 34px;
    border-radius: 6px;
    padding: 0 10px 0 6px;
    position: sticky;
    top: 74px;
    z-index: 2;
    background-color: var(--black);

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

    .chevron {
      transition: transform 0.2s ease;
    }

    &:hover {
      background-color: #22222aa9;
    }

    &.selected {
      background-color: #22222a;
    }

    &.selected .name {
      color: var(--primary-7) !important;
      font-weight: 600 !important;
    }

    .name {
      color: #b0b1c3 !important;
      font-weight: 400 !important;
      font-size: 14px !important;
      font-family: var(--font-family-mono);
    }
  }

  .stepLogContainer {
    padding: 15px 10px 15px 36px;
    flex-shrink: 0;

    .consoleLine {
      color: var(--white);

      @include mono-font;

      word-wrap: break-word !important;
      white-space: pre-wrap !important;
      cursor: text;
      margin: 0;
      padding: 0;

      &:empty {
        display: inline-block;
        min-height: 20px;
      }
    }
  }
}

.popover {
  :global {
    .bp3-popover-content {
      padding: var(--spacing-medium);
      max-width: 700px;
      word-break: break-all;
    }
  }
}

.hideStages {
  > .checkMenuItemContainer {
    > .menuItem {
      display: none;
    }
  }
}
