.layer-detail {
  .order-container {
    padding: 0;
    min-width: auto;

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

.order-container {
  min-width: 1000px;
  padding: $space-default;
  @include box-sizing();

  .order-content {
    background: $color-white;

    .order-title {
      @include box();
      @include flex-align-center();
      height: 46px;
      padding: 0 $space-default;
      @include box-sizing();
      border-bottom: 1px solid $color-border-base;

      .efly-button-icon {
        margin-right: $space-mini;
      }

      .order-title-label {
        font-size: $font-medium;
      }
    }

    .order-table {
      padding: $space-default;
      @include box-sizing();
      width: 100%;
      background: $color-white;

      table {
        background: $color-table-bg;
        width: 100%;

        thead {

          tr {
            height: 62px;

            th {
              font-weight: normal;
              color: $color-text-secondary;
              font-size: $font-small;
              border-bottom: 1px solid $color-border-lighter;
            }
          }
        }

        tbody {
          tr {
            &:last-child {
              td {
                border-bottom: none;
              }
            }

            td {
              font-size: $font-small;
              text-align: center;
              padding: $space-mini 0;
              border-bottom: 1px solid $color-border-lighter;
            }
          }
        }
      }

      .order-label {
        position: relative;
        min-width: 120px;
        $color-discount-time-bg: #fe510d;
        $color-discount-time-text-bg: #A6590E;
        $color-discount-vip-bg: #FE840D;
        $color-discount-time-text-bg: #A6590E;

        .order-label-discount {
          @include box();
          @include flex-align-center();
          height: 20px;
          background: #fe510d;
          position: absolute;
          left: 16px;
          top: 0;
          padding-right: $space-xs;

          &:nth-child(2) {
            left: 120px;
          }

          &::after, &::before {
            position: absolute;
            top: 0;
            content: '';
          }

          &::before {
            left: -6px;
            border-top: 20px transparent dashed;
            border-left: 0px transparent dashed;
            border-right: 6px $color-discount-time-bg solid;
          }

          &::after {
            right: -6px;
            border-bottom: 20px transparent dashed;
            border-right: 0px transparent dashed;
            border-left: 6px $color-discount-time-bg solid;
          }

          .order-label-value {
            @include box();
            @include flex-center();
            position: relative;
            left: -6px;
            width: 36px;
            height: 14px;
            background: $color-discount-time-text-bg;
            color: white;
            font-size: $font-small;
            font-weight: bold;

            &::after, &::before {
              position: absolute;
              top: 0;
              content: '';
            }

            &::before {
              left: -5px;
              border-top: 14px transparent dashed;
              border-right: 5px $color-discount-time-text-bg solid;
              border-left: 0px transparent dashed;
            }

            &::after {
              right: -5px;
              border-left: 5px $color-discount-time-text-bg solid;
              border-bottom: 14px transparent dashed;
              border-right: 0px transparent dashed;
            }

          }

          .order-label-angle {
            position: absolute;
            border-top: 3px transparent dashed;
            border-right: 5px $color-discount-time-text-bg solid;
            border-left: 0px transparent dashed;
            left: -5px;
            top: 0px;
          }

          .order-label-name {
            position: relative;
            left: -3px;
            font-size: $font-mini;
            color: $color-white;
            font-weight: bold;
            font-style: italic;
            margin-left: $space-xs;
          }

          &.vip {
            background: $color-discount-vip-bg;

            &::before {
              border-right: 6px $color-discount-vip-bg solid;
            }

            &::after {
              border-left: 6px $color-discount-vip-bg solid;
            }

            .order-label-value {
              background: $color-discount-time-text-bg;
            }

            .order-label-angle {
              border-right: 5px $color-discount-time-text-bg solid;
            }
          }
        }
      }

      .order-config {
        @include box();
        @include flex-center();
        @include flex-column();

        > div {
          @include box();
          margin-bottom: $space-xs;

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

          > div {
            min-width: 260px;
          }

          > span {
            text-align: left;

            &:first-child {
              width: 90px;
            }


            &:last-child {
              @include box();
              @include flex();
              word-break: break-all;
              min-width: 260px;
            }
          }
        }
      }
    }
  }
}