@import '~choerodon-ui/lib/style/themes/default';

.c7ncd-instance-details {
  padding: 0 .2rem 0 .16rem;
  overflow: auto;

  &-inner {
    min-width: 6.5rem;
  }

  &-empty {
    padding: 20px 0;
    color: var(--text-color3);
  }

  &-title {
    margin-bottom: .16rem;
    border-bottom: 1px solid rgba(0, 0, 0, .12);
    font-size: .15rem;
    color: var(--text-color);
    font-weight: 500;

    span {
      line-height: .28rem;
    }
  }

  &-panel {
    margin-bottom: .1rem;
  }

  &-grid {
    display: grid;
    grid-template-columns: 2fr minmax(1.1rem, 1fr);
    justify-content: space-between;
    grid-column-gap: .36rem;
    margin-bottom: .1rem;
  }

  &-item {
    display: grid;
    grid-template-columns: minmax(2.8rem, 1fr) minmax(2.4rem, 1fr);
    justify-content: space-between;
    grid-gap: .06rem .36rem;
  }

  &-block,
  &-inline {
    display: grid;
    grid-template-columns: .88rem 1fr;
    justify-content: space-between;
    grid-gap: .1rem;
  }

  &-block {
    grid-template-columns: .68rem 1fr;
    margin-bottom: .12rem;
    width: 100%;
    font-weight: 500;
  }

  &-key {
    color: var(--text-color3);
  }

  &-value {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    //color: #000;
  }

  &-label {
    display: grid;
    grid-template-columns: 1fr .24rem;

    .c7ncd-deployment-popover-labels {
      display: flex;
      overflow: hidden;

      span {
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        & + span {
          margin-left: .2rem;
        }
      }
    }
  }

  &-port {
    display: grid;
    grid-template-columns: .6rem .24rem;
  }
}

.c7ncd-deploy-pvc {
  padding: 2px 6px;
  font-size: 12px;
  line-height: 16px;
  font-weight: bold;

  &_Pending {
    color: #4d90fe;
    background: rgba(77, 144, 254, .20);
  }

  &_Lost {
    color: rgba(0, 0, 0, 0.54);
    background: rgba(0, 0, 0, .08);
  }

  &_Bound {
    color: #0bc2a8;
    background: rgba(11, 194, 168, .2);
  }

  &_undefined {
    background: transparent;
  }
}

.c7ncd-detail-btn {
  vertical-align: middle;
  padding: 0 !important;
  height: 32px;
  line-height: 32px;
  //color: #3f51b5;

  &.@{c7n-prefix}-btn-flat:hover {
    background: transparent;
  }

  .@{c7n-prefix}-ripple-wrapper {
    display: none;
  }

  & > div.btn-loading > span {
    background: #3f51b5;
    border-color: #3f51b5;
  }
}

.c7ncd-deployment-icon-more {
  line-height: 20px;
  font-size: 18px;
  font-weight: 600;
  color: @primary-color;
  margin-left: .02rem;
}