@import '../helpers/helpers';

.tc {
  &-generic {
    @include make-row;

    &__main {
      @include make-col-ready;
      @include make-col(7);
    }

    &__right-side {
      @include make-col-ready;
      @include make-col(5);

      &-block {
        background: $gray-bg;
        border: 1px solid $gray;
        padding: 20px 25px;

        .tc-result {
          margin-top: 20px;

          &__total {
            margin: 0;
          }

          &__sqm {
            font-size: 2rem;
            font-weight: bold;
            line-height: 46px;
          }
        }
      }
    }

    &__calc-btn {
      width: 200px;
      margin-top: 10px;
    }
  }

  &__estimate {
    @include make-col(12);
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
  }

  &__floors {
    @include make-col(12);
  }

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

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

    &  .tc__wastage__detail-accordion {
      font-weight: 500;
      padding-right: 3px;
    }

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

    & .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;
      }
    }
  }
}

@include media-breakpoint-down(sm) {
  .tc {
    &-generic {
      padding-bottom: 0;

      &__main {
        @include make-col(12);
      }

      &__right-side {
        @include make-col(12);

        h3 {
          font-size: 1.5rem;
        }
      }

      &__calc-btn {
        margin: 0 0 15px;
        width: 100%;
      }
    }

    &__estimate {
      margin-bottom: 15px;
    }
  }
}