.ti-total-area {
  position: relative;
  background: $gray-bg;
  padding: 20px;

  & .step1-inactive {
    width: 100%;
    flex-wrap: wrap;
  }

  &__title {
    font-weight: 500;
    margin-bottom: 13px;
  }

  &__waste {
    width: 100%;
    text-align: right;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1;
    justify-content: flex-end;
    margin-bottom: 0;
    padding-bottom: 5px;

    .ti__total:not(.ti__total-waste) & {
      display: none;
    }
  }

  &__row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding-bottom: 5px;

    &-specification {
      font-size: .875rem;
      font-weight: 700;
      line-height: 22px;
    }

    &-value {
      font-size: .875rem;
      font-weight: 400;
      line-height: 22px;
    }
  }

  &__accordion-wrap {
    color: $black;
  }

  &__wastage {
    margin-top: 13px;

    & .ti-total-area__detail-name {
      font-size: 14px;
      font-weight: 400;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    & .notification .icon {
      display: inline-block;
    }

    &  .ti-total-area__detail-accordion {
      font-weight: 500;
      padding-right: 3px;
    }

    &-value {
      display: inline-block;
      width: 60px;
      text-align: center;
      flex-shrink: 0;
      word-break: break-all;
    }
  }

  & .accordion__header-icon-small {
    width: 15px;
  }

  &__detail-accordion,
  .accordion__header-icon-small {
    font-size: .875rem;
    font-weight: 500;
    line-height: 17px;
    text-decoration: underline;
    color: $blue;
    display: block;
    height: 100%;
  }

  &__detail-name {
    cursor: pointer;
  }

  &__details-hidden {
    margin-top: 15px;
    transition: all .5s ease;

    & > .notification_warning {
      padding: 8px 20px;

      & strong p {
        margin-left: 25px;
        margin-right: 20px;
        margin-bottom: 0;
      }
    }

    &-height {
      height: 0;
    }

    & .notification__icon {
      top: 10px;
      left: 14px;
    }

    & .notification_warning p {
      font-size: 1rem;
    }

    & .notification_warning > p {
      font-size: .875rem;
      font-weight: 400;
      line-height: 22px;

      &:last-of-type {
        margin-bottom: 0;
      }
    }
  }

  & .collapsed .accordion__header-icon-small {
    position: relative;
    transform: rotate(180deg);
    width: 15px;
  }

  &__warning {
    margin-top: 10px;
    margin-bottom: 0;

    &-red {
      color: $red;
    }
  }

  &__specification {
    font-size: 1rem;
    font-weight: 500;
    line-height: 24px;

    .ti__step1-inactive & {
      font-size: .875rem;
      font-weight: 700;
      line-height: 22px;
    }
  }

  &__form-row {
    margin: 25px 0;

    &:last-of-type {
      margin-bottom: 0;
    }

    &-mt {
      margin-top: 15px;
    }
  }

  &__form-row label,
  &__wastage-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
  }

  &__wastage-area {
    display: none;

    .ti__total-waste & {
      display: flex;
    }
  }

  &__total {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    background: $gray-bg;
    padding: 5px 20px;

    .ti__step1-inactive & {
      padding: 0 20px;
    }

    &::before {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 20px;
      width: calc(100% - 40px);
      border-top: 1px solid $gray;
    }

    &-value {
      font-size: 1.5rem;
      font-weight: 700;
      line-height: 46px;
      text-align: right;
      color: $blue-dark;
      margin-left: auto;
      word-break: break-all;
    }
  }
}

@include media-breakpoint-down(md) {
  .ti-total-area {
    padding: 15px;

    &__details-hidden {
      margin-top: 10px;
    }

    &__form-row {
      margin: 15px 0;

      &-mt {
        margin-top: 5px;
      }
    }

    &__total {
      padding: 10px 15px;
      border-top: 0;
      background-color: $gray-light;

      &::before {
        display: none;
      }

      .ti__step1-inactive & {
        padding: 8px 15px;
      }

      &-value {
        font-size: 1.125rem;
        line-height: 24px;
      }

      & .ti-total-area__specification {
        font-size: .875rem;
        font-weight: 700;
      }
    }
  }
}

@include media-breakpoint-down(sm) {
  .ti-total-area {
    &__wastage {
      & .chb {
        margin-bottom: 6px;
      }

      & .ti-total-area__detail-name {
        display: flex;
        justify-content: flex-start;
        margin-left: 34px;
      }
    }

    &__detail-name {
      white-space: nowrap;
    }

    &__details-hidden {
      margin-bottom: 10px;

      & > .notification_warning {
        padding: 8px 10px;
        margin-bottom: 10px;
      }

      & .notification__icon {
        left: 5px;
      }
    }

    &__warning {
      margin-top: 10px;
      line-height: 20px;
    }

    &__specification {
      font-size: .875rem;
      font-weight: 700;
      line-height: 22px;
      max-width: 70%;
    }
  }
}