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

.c7ncd-expand-btn-wrap {
  padding-left: 12px;

  .c7ncd-expand-btn {
    padding: 0;
    color: #3f51b5;

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

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

  .c7ncd-deploy-detail-type-btn {
    color: #3f51b5;
    margin-right: .5rem;

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

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

.c7ncd-deploy-panel {
  background: #f8f8f8;
  margin-bottom: 24px;
  border: 1px solid rgba(0, 0, 0, .2) !important;
  border-radius: 2px 2px 1px 1px;
  overflow: hidden;

  .c7ncd-deploy-panel-header {
    display: inline-block;
    margin-left: 12px;
    max-width: ~"calc(100% - 50px)";

    .c7ncd-deploy-panel-title {
      margin-bottom: 4px;
      line-height: 20px;
      font-size: 16px;
      color: var(--text-color);
      font-weight: 500;
    }

    .c7ncd-deploy-panel-text {
      line-height: 16px;
      font-size: 12px;
      color: var(--text-color4);
    }
  }

  .@{c7n-prefix}-collapse-header {
    background: #fff;
    box-shadow: 1px 0 1px 0 rgba(0, 0, 0, .4);
  }

  .@{c7n-prefix}-collapse-header:hover {
    background: #f8f8f8;
  }

  .@{c7n-prefix}-collapse-content-box {
    margin-top: -4px;
    padding: 0 0 20px;
  }

  &.@{c7n-prefix}-collapse-item {
    & > .@{c7n-prefix}-collapse-header {
      .@{c7n-prefix}-collapse-expand-icon {
        width: 24px;
        height: 24px;
        font-size: 24px;

        &:before {
          content: '\E5CF';
        }
      }
    }
  }

  .c7ncd-deploy-spin {
    text-align: center;
    padding: 50px 20px;
  }

  .c7ncd-deploy-container-title {
    margin: 20px 0 12px;

    .c7ncd-deploy-container-name {
      margin-top: 16px;
      margin-right: 8px;
      color: var(--text-color);
      font-size: 16px;
    }

    .c7ncd-deploy-container-label {
      display: inline-block;
      height: 20px;
      line-height: 16px;
      padding: 2px 6px;
      text-align: center;
      font-size: 12px;
      color: #fff;
      background: #5266d4;
      border-radius: 2px;
    }
  }

  .c7ncd-deploy-container-table {
    padding: 20px 32px;
    background: #fff;
  }

  .c7ncd-deploy-label {
    margin: 20px 0 12px 0;
    color: var(--text-color);
    font-size: 16px;
  }

  .c7ncd-deploy-detail-label {
    margin-bottom: 4px;
    font-size: 12px;
    min-height: 18px;
    color: var(--text-color4);
  }

  .c7ncd-deploy-detail-text {
    width: 100%;
    min-height: 22px;
    font-size: 15px;
    color: var(--text-color);
    word-wrap: break-word;
    word-break: break-all;
  }

  .c7ncd-deploy-volume-wrap {
    background: #fff;
    padding: 0 32px 20px;
    margin-top: 20px;

    .c7ncd-deploy-volume-main {
      display: flex;
      flex-wrap: wrap;

      .c7ncd-deploy-volume-item {
        flex: 0 0 50%;
        width: 50%;
        margin-top: 20px;

        &_full {
          flex: 0 0 100%;
          width: 100%;
          margin-top: 20px;
        }
      }
    }

    .c7ncd-deploy-volume-flex {
      display: table;
      width: 100%;

      .c7ncd-deploy-volume-item {
        display: table-cell;
        width: 42%;
        padding: 0 12px;

        &_short {
          display: table-cell;
          width: 16%;
        }
      }
    }
  }

  .c7ncd-deploy-security-wrap {

    margin: 20px 0 -12px;

    .c7ncd-deploy-security-block {
      display: table;
      margin-bottom: 12px;
      padding: 20px 32px;
      width: 100%;
      background: #fff;

      .c7ncd-deploy-security-item {
        display: table-cell;
        width: 50%;

        &_flex {
          display: table-cell;
        }
      }
    }
  }

  .c7ncd-deploy-health-wrap {
    .c7ncd-deploy-health-content {
      display: table;
      width: 100%;
      background: #fff;

      .c7ncd-deploy-health-block {
        display: table-cell;
        padding: 20px 32px;

        .c7ncd-deploy-health-title {
          margin: 0 0 16px -2px;
          font-size: 14px;
          font-weight: 500;
          color: var(--text-color2);
        }

        .c7ncd-deploy-health-main {
          margin-top: -10px;

          &::after {
            visibility: hidden;
            display: block;
            font-size: 0;
            content: " ";
            clear: both;
            height: 0;
          }

          zoom: 1;

          .c7ncd-deploy-health-item {
            float: left;
            margin-top: 10px;
            width: 50%;
          }
        }
      }
    }
  }

  .c7ncd-deploy-empty-table {
    margin-top: 20px;
    padding: 20px 32px;
    background: #fff;
  }

  .c7ncd-deploy-detail-empty {
    margin-top: 20px;
    background: #fff;
    padding: 20px 32px;
    color: rgba(0, 0, 0, .45);

    p {
      color: rgba(0, 0, 0, .45);
      margin-bottom: 8px;
    }

    .c7ncd-deploy-health-empty,
    & > span:first-child {
      padding-right: 12px;
      font-size: 14px;
      color: var(--text-color);
    }

    .c7ncd-deploy-health-empty {
      margin-left: 12px;
    }
  }
}