@import '../../global.scss'; // 根据实际情况调整路径


.podBox {
  @include with-border;
  border-radius: 4px;
  width: 158px;
  height: 40px;
  padding: 7px;
  margin: 4px;
  display: flex;
  align-items: center;
  &[data-hover=true] {
    cursor: pointer;
    &:hover {
      .podInner {
        & > :first-child {
          width: 0;
          height: 0;
          overflow: hidden;
        }
        & > :last-child {
          display: block;
        }
      }
    }
  }
}

.podInner {
  width: 110px;
  font-size: 12px;
  & > :last-child {
    display: none;
  }
}

.instancePop {
  padding: 4px;
  min-width: 280px;
  line-height: 24px;
  color: var(--color-text1-2, #6e6e6e);
}

.podContainerList {
  display: inline-flex;
  flex-wrap: wrap;
}

.podContainer {
  background-image: url('https://img.alicdn.com/imgextra/i3/O1CN01Na0Kij1tVSFDKCt2J_!!6000000005907-2-tps-20-20.png');
  background-size: 16px;
  background-repeat: no-repeat;
  width: 16px;
  height: 16px;
  position: relative;
  margin: 0 2px;
  top: 3px;
  &[data-error='true'] {
    background-image: url('https://img.alicdn.com/imgextra/i3/O1CN01ey5cJn1TUphCelGvv_!!6000000002386-2-tps-40-40.png');
  }
}

.actions {
  :global {
    .next-btn {
      margin-right: 16px;
    }
  }
}

.pre {
  margin: 0;
  overflow: auto !important;
  background-color: var(--color-black, #000);
  color: var(--color-white, #fff);
  padding: 12px;
  height: 600px;
}

.podLegend {
  display: flex;
}

.legendItem {
  display: flex;
  align-items: center;
  margin-left: 24px;
}

.legendImg {
  width: 8px;
  height: 8px;
}

.legendName {
  flex: 1;
  margin-left: 10px;
  font-size: 12px;
  color: var(--color-brand3-6, #7d8389);
  line-height: 22px;
}

.podDetails {
  --timeline-item-left-content-width: 100px;

  :global {
    .next-card-header {
      margin: 0 !important;
      padding: 16px 20px !important;
      background-color: var(--color-brand3-2, #e9edf0);
    }
    .next-card-content-container {
      margin: 12px 0 8px;
    }
    .next-tabs-content {
      padding: 12px 0;
    }
    .next-step-item-tail-overlay {
      background: var(--color-fill1-3, #e8e8e8) !important;
      width: 2px !important;
    }
    .next-step-item-content {
      margin-bottom: 25px;
    }
  }
}

.podBasic {
  padding: 4px 0;
}

.podHeader {
  &Title {
    line-height: 32px;
    font-size: 18px;
    color: var(--color-text1-4, #292929);
    font-weight: 500;
    display: flex;
    align-items: center;
  }
  &Desc {
    line-height: 18px;
    font-size: 12px;
    color: var(--color-text1-3, #575757);
  }
}

.container {
  border: 1px solid var(--color-line1-1, #e8e8e8);
  border-radius: 8px;
  padding: 8px 16px;
  margin-bottom: 16px;
}

.podWrap {
  display: flex;
  flex-wrap: wrap;
  margin: -4px;
}

.empty {
  height: calc(100vh - 258px);
}


.terminal {
  position: relative;
  transform: rotateZ(0deg);
  height: calc(100vh - 336px);
  background-color: var(--color-black, #000000);
  :global {
    .xterm-screen {
      margin-left: 8px;
    }
  }
  &Fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1001;
    background-color: var(--color-black, #000);
  }
  &Tools {
    position: fixed;
    z-index: 100;
    right: 20px;
    top: 16px;
    background-color: var(--color-text1-3, #575757);
    border-radius: 4px;
    width: 32px;
    color: var(--color-line1-3, #cecece);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 6px 0;
    border: 1px solid var(--color-text1-3, #575757);
    :global(.teamix-icon) {
      color: var(--color-line1-3, #cecece);
    }
  }
}



.yamlContainer {
  border: 1px solid var(--color-brand3-2, #e9edf0);
  border-radius: 4px;
}

.yamlHeader {
  display: flex;
  height: 32px;
  align-items: center;
  border-bottom: 1px solid var(--color-brand3-2, #e9edf0);
  background-color: var(--color-brand3-1, #f2f5f7);
  padding: 0 16px;
}