.create-container {
  padding: $space-default;
  @include box-sizing();

  .create-content {
    @include box();
    width: 100%;
    background: $color-white;
    padding: $space-default;
    @include box-sizing();
    margin-bottom: $space-default;
    //min-width: 1400px;


    &:last-child {
      margin-bottom: 0;
    }

    // 创建标题
    .create-label {
      @include box();
      @include flex-justify-start();
      @include flex-align-start();
      position: relative;
      //top: 5px;
      width: 150px;
      font-size: $font-default;
      line-height: 34px;
      color: $color-text-secondary;

      .icon {
        @include box();
        @include flex-center();
        font-size: $font-default;
        margin-right: $space-xs;
        position: relative;
        top: 1px;
      }
    }

    .create-options {
      @include box();
      @include flex-column();
      @include flex-justify-start();
      @include flex-align-start();
      @include flex();
      @include flex-wrap();

      > div {
        margin-bottom: $space-default;

        &:last-child {
          margin-bottom: 0;
        }
      }


      .create-options-item {
        @include box();
        @include flex-column();
        @include flex-align-start();
        width: 100%;
        margin-bottom: $space-default;

        &:last-child {
          margin-bottom: 0;
        }


        .create-options-item-label {
          color: $color-text-regular;
          font-size: $font-small;
          margin-bottom: $space-xs;
        }
      }

      // 节点信息
      .create-node-info {
        @include box();
        @include flex-column();
        @include flex-align-start();
        width: 100%;
        background: $color-table-bg;
        border: 1px solid #eeeeee;
        font-size: $font-small;
        padding: 0 $space-mini;
        @include box-sizing();

        > div:last-child {
          border-bottom: none;
        }

        .create-node-info-label {
          width: 100%;
          padding: $space-mini 0;
          @include box-sizing();
          border-bottom: 1px solid #eeeeee;
        }

        .create-node-info-content {
          width: 100%;
          margin-top: $space-mini;
          border-bottom: 1px solid #eeeeee;

          .create-node-info-item {
            @include box();
            margin-top: $space-xs;

            .create-node-info-item-label {
              width: 80px;
              color: $color-text-secondary;
            }

            .create-node-info-item-detail {
              @include flex();
            }
          }

        }

        .create-node-tip {
          padding: $space-default 0;
          @include box-sizing();
          color: $color-text-secondary;
        }

      }

      .options-label-xs {
        min-width: 90px;
      }

      .options-label-mini {
        min-width: 128px;
      }

    }
  }


}

.create-config {
  @include box();
  flex-wrap: wrap;
  margin-bottom: $space-mini;
  line-height: 1.2;

  .create-config-btn {
    position: relative;
    @include box();
    @include flex-column();
    @include flex-center();
    width: 182px;
    padding: $space-default 0;
    margin: 0 $space-mini $space-mini 0;
    border: 1px solid $color-border-base;
    cursor: pointer;
    border-radius: 2px;

    .create-config-selected {
      display: none;
      position: absolute;
      top: 0;
      right: 0;
      border-left: 11px solid $color-primary;
      border-bottom: 11px solid $color-primary;
      border-color: $color-primary $color-primary transparent transparent;
      border-style: solid;
      border-width: 11px;

      .icon {
        position: absolute;
        top: -12px;
        height: 12px;
        width: 12px;
        font-size: $font-small;
        color: $color-white;
      }
    }

    &:hover, &.hover {
      border-color: $color-primary;
    }

    &:active, &.active {
      border-color: $color-primary;

      .font-bold {
        color: $color-primary;
      }

      .create-config-selected {
        display: block;
      }
    }
  }
}

.auto-renew-btn {
  position: relative;
  left: -1px;
  background: $color-light-primary;
  color: $color-text-secondary;

  &:hover, &.hover {
    border: 1px solid $color-border-base !important;
    color: $color-text-secondary;
    background: $color-light-primary;
  }

  &:active, &.active {
    border: 1px solid $color-border-base !important;
    color: $color-text-secondary;
    background: $color-light-primary;
  }

}


.create-discount {
  position: absolute;
  top: -8px;
  right: 0;
  background: $color-warning;
  color: $color-white;
  padding: 0 2px;
  @include box-sizing();
  font-size: $font-mini;
}

.create-slider {
  @include box();
  @include flex-align-end();
  line-height: 1.2;

  .create-slider-progress {
    position: relative;

    .create-slider-progress-info {
      @include box();
      @include flex-justify-between();
      @include flex-align-center();
      width: 100%;
      position: absolute;
      top: -26px;
      color: $color-text-regular;

      > div:first-child:before {
        content: "";
        display: block;
        border: .5px solid $color-border-base !important;
        position: absolute;
        height: 8px;
        top: 20px;
      }

      > div:last-child:after {
        content: "";
        display: block;
        border: .5px solid $color-border-base !important;
        position: absolute;
        height: 8px;
        top: 20px;
        right: 0;
      }
    }
  }

  .create-slider-input {
    @include box();
    @include flex-center();
    margin-left: $space-mini;

    .create-slider-input-unit {
      margin-left: $space-xs;
      color: $color-text-regular;
    }
  }
}

.create-select-config {
  @include box();
  position: fixed;
  background: $color-white;
  width: calc(100% - 204px);
  right: 0;
  bottom: 81px;
  padding: $space-default;
  @include box-sizing();
  box-shadow: 0 0 4px 0 #d3d3d3;

  .create-select-config-content {
    @include flex();
    margin-left: $space-default;

    .create-select-config-detail {
      @include box();
      background: $color-table-bg;
      padding: $space-small;
      @include box-sizing();
      font-size: $font-small;

      .create-select-config-detail-list {
        @include flex();

        .create-select-config-detail-item {
          @include box();
          margin-bottom: $space-xs;

          &:last-child {
            margin-bottom: 0;
          }

          .create-select-config-detail-label {
            width: 90px;
            color: $color-text-secondary;
          }

          .create-select-config-detail-value {
            @include flex();
          }
        }
      }
    }


    .order-container {
      padding: 0;
      margin-top: $space-default;

      .order-table {
        padding: 0;
      }
    }
  }
}