@import '../helpers/helpers';

.ti {
  &__step,
  &__estimate,
  &__new,
  &__next {
    display: flex;
  }

  &__step {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: flex-start;

    &1,
    &2-inactive,
    &2-active,
    &3-active {
      @include ti-step-state;
    }

    &2-inactive {
      & .ti__cost-ready {
        display: flex;
      }
    }

    &2-active {
      & .ti__cost {
        display: flex;
      }
    }

    &3-active {
      & .ti__choose {
        display: flex;
      }
    }
  }

  &__step1-return,
  &__step2-return {
    position: absolute;
    top: 50%;
    right: 0;
    cursor: pointer;
    font-size: $font-size-base;
    font-weight: 500;
    line-height: 22px;
    transform: translateY(-50%);
    display: none;
  }

  &__card,
  &__floors {
    @include make-col(7);
  }

  &__estimate,
  &__error,
  &__new,
  &__next,
  &__cost,
  &__choose {
    @include make-col(12);
  }

  &__error {
    margin-top: 10px;

    .notification_general {
      margin: 0;
    }
  }

  &__estimate {
    flex-wrap: wrap;
    margin-top: 15px;
  }

  &__floors {
    padding-right: 15px;

    &-invalid {
      & input {
        border-color: $red;
      }
    }
  }

  &__total {
    @include make-col(5);
    position: relative;
    padding-left: 15px;

    &.less-then-5 {
      & .ti-total-area__warning {
        color: $red;
      }

      & .ti-total-area__form-row [name='ti-total-area'] {
        border-color: $red;
      }
    }

    &__control-holder,
    &__control-installation {
      margin: 15px 0;
    }

    &__warning {
      @include info-text;
      text-align: center;
    }

    .bw {
      .stock__tab {
        width: 50%;
      }

      .store__name {
        max-width: 270px;
      }
    }

    &_bw {
      outline: 4px solid $warm-grey;
      border-left: 0;
    }
  }

  &__new {
    justify-content: center;

    &-link {
      font-size: $font-size-base;
      font-weight: bold;
      line-height: 22px;

      a {
        position: relative;
        top: 5px;
        cursor: pointer;
        border-bottom: 1px solid $blue;
        text-decoration: none;

        &:hover {
          border-bottom-color: $link-hover-color;
        }
      }
    }
  }

  &__next {
    margin: 20px 0 0;
    justify-content: center;
    align-items: center;
    align-content: center;

    &-two {
      display: none;
    }

    & .btn {
      max-width: 380px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    &-button-arrow {
      @include primary-text;
      font-weight: 700;
      text-align: center;
      padding-left: 10px;
    }
  }

  &__cost {
    display: none;
    flex-wrap: wrap;
    padding-top: 15px;

    &_input-invalid {
      .ti__cost {
        &_removal-input {
          & input {
            border-color: $red;
          }
        }

        &_removal_error-msg {
          display: block;
        }
      }
    }

    &_error-msg,
    &_removal_error-msg {
      @include additional-text;
      width: 100%;
      margin: 8px 0 0;
      color: $red;
      display: none;
    }

    &-ready,
    &_postcode,
    &_removal,
    &_levelling,
    &_options {
      @include make-col(12);
    }

    &-ready {
      display: none;
      flex-wrap: wrap;
    }

    &_postcode {
      padding: 30px 20px;
      background: $gray-bg;

      &-row,
      &-label {
        @include primary-text;
        font-weight: 500;
      }

      &-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin: 0;
      }

      &-label {
        display: block;
        position: relative;

        &::before {
          content: '*';
          display: inline-block;
          color: $red;
          padding-right: 4px;
        }
      }

      &-input {
        padding-left: 15px;
        width: 100px;

        & input {
          padding: 8px;

          .ti__cost-invalid & {
            border-color: $red;
          }
        }
      }
    }

    &_removal,
    &_levelling {
      margin: 15px 0;
      padding: 20px;
      background: $gray-bg;

      &-title,
      &-label {
        @include primary-text;
        font-weight: 500;
      }

      &-title {
        margin: 0;
        display: flex;

        &::before {
          content: '*';
          display: inline-block;
          color: $red;
          padding-right: 8px;
        }
      }

      &-radio {
        margin: 10px 0 0;

        & label {
          padding: 0 35px;
        }
      }

      &-row {
        margin: 15px 0 10px;
        display: none;
        align-items: center;

        &.ti__cost_removal-row {
          margin: 15px 0 0;
        }

        .ti__cost_removal-yes & {
          display: flex;
        }
      }

      &-label {
        padding-right: 15px;
      }

      &-input {
        width: 60px;
        flex-shrink: 0;

        & input {
          text-align: center;
          padding: 8px;
        }
      }
    }

    &_options {
      padding: 20px;
      background: $gray-bg;
      margin: 0;

      & .collapsed .icon {
        position: relative;
        transform: rotate(180deg);
      }

      &-title,
      &-what {
        font-size: 1rem;
        font-weight: 500;
        display: flex;
      }

      &-title {
        &::before {
          content: '*';
          display: inline-block;
          color: $red;
          padding-right: 8px;
        }
      }

      &-what {
        color: $blue;
        line-height: 19px;
        text-decoration: underline;
        cursor: pointer;
        align-items: center;

        & span:first-child {
          padding-right: 2px;
        }

        & .icon {
          width: 15px;
          height: 100%;
          display: block;
          line-height: inherit;
        }
      }

      &-list {
        display: flex;
        flex-wrap: wrap;
        margin-top: -1px;
      }

      &-item {
        @include make-col(4);
        margin-top: 15px;
        padding-right: 5px;
      }
    }

    &_options,
    &_levelling {
      &-title {
        line-height: 24px;
        margin-bottom: 5px;
      }

      & .notification {
        margin-top: 5px;
        margin-bottom: 0;
        padding: 8px 25px 8px 15px;
        line-height: 22px;
      }

      & .collapsed .icon {
        position: relative;
        transform: rotate(180deg);
      }
    }

    &_levelling {
      display: none;

      &_open {
        display: block;
        margin-bottom: 0;
      }
    }

    &-invalid,
    &-invalid-2 {
      & .ti__cost_error-msg {
        display: block;
      }
    }
  }

  &__choose {
    display: none;
    flex-wrap: wrap;

    &_title {
      width: 100%;
      padding: 20px 0 10px;
      margin-bottom: 0;
    }

    &_first {
      width: 100%;

      .notification_general {
        margin: 0;
      }
    }

    &_divider {
      @include make-col(1);
      font-size: 1rem;
      font-weight: bold;
      position: relative;
      text-align: center;
    }

    &_second {
      @include make-col(12);
      padding-left: 0;

      .choose {
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: start;
        padding: 10px 20px;
      }
    }

    .ti__new {
      margin: 20px 0 25px;
      color: $blue;

      &:hover {
        color: $link-hover-color;
      }
    }
  }

  &__overview {
    @include make-col(7);

    &-price {
      @include make-col(5);
      padding-top: 15px;
      padding-left: 20px;
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      align-content: flex-start;

      &_total {
        height: 48px;

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

        &-text {
          font-size: 1.125rem;
          font-weight: 700;
          line-height: 46px;
        }

        &-value {
          font-size: 1.5rem;
          font-weight: 700;
          line-height: 46px;
          color: $blue-dark;
        }
      }

      &_total,
      &_area,
      &_head,
      &_access,
      &_floor {
        width: 100%;
        position: relative;
        display: flex;
        justify-content: flex-start;
        padding: 0 20px;
        background: $gray-bg;
        align-items: baseline;

        &-spec {
          font-size: $font-size-base;
          font-weight: 700;
          line-height: 22px;
        }

        &-rest {
          margin-left: auto;
        }
      }

      &_head {
        padding-top: 10px;
        height: 38px;
        font-size: 1.5rem;
        font-weight: 500;
        line-height: 2rem;
      }

      &_area {
        padding-top: 10px;
        height: 43px;

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

      }

      &_floor,
      &_access {
        display: flex;
        flex-direction: column;

        &-head,
        &-item {
          @include make-col(12);
          display: flex;
          width: 100%;
        }

        &-head {
          font-weight: bold;
          padding-top: 10px;
        }

        &-spec {
          @include make-col(7);
          flex-direction: row;
          font-weight: normal;
        }

        &-rest {
          @include make-col(5);
          text-align: right;
          font-size: 1rem;
          font-weight: bold;
        }
      }

      &-estim,
      &_floor-only {
        width: 100%;
        padding-top: 10px;
        background: $gray-bg;

        & .ti__overview-price_total {
          padding-bottom: 10px;
          padding-top: 15px;

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

      &_floor-only {
        & .ti__overview-price_total {
          padding-top: 0;
          padding-bottom: 0;

          &::after {
            display: none;
          }
        }
      }

      &_shortcut {
        width: 100%;
        background: $gray-bg;
        position: relative;
        padding: 15px 20px 10px;

        &-text,
        &-link {
          font-size: $font-size-base;
          line-height: 22px;
          text-align: right;
          margin-bottom: 0;
        }

        &-text {
          font-weight: 400;
        }

        &-link {
          font-weight: 500;
          text-decoration: underline;
        }
      }
    }
  }

  &__prod {
    margin-top: 15px;

    &_img {
      & > img {
        height: 110px;
      }

    }

    &_title,
    &_list {
      margin-left: 15px;
      line-height: 24px;
      margin-bottom: 0;
    }

    &_title {
      font-size: 1.125rem;
      font-weight: 500;
    }

    &_list {
      padding-left: 16px;
      font-size: $font-size-base;
      font-weight: 400;
      padding-top: 5px;
    }
  }
}

.step1-inactive,
.step2-inactive,
.step3-inactive {
  display: none;
}

.ti__step1-inactive {
  & .step1-active {
    display: none;
  }

  & .step1-inactive {
    display: flex;
  }

  & .ti__estimate {
    @include make-col(5);
  }

  & .ti__total {
    @include make-col(12);
    padding-left: 20px;
  }

  & .ti-total-area {
    padding: 15px 20px 3px;
  }
}

.ti__step2-inactive {
  & .step2-active {
    display: none;
  }

  & .step2-inactive {
    display: flex;
  }
}

.btn__text-desktop {
  display: block;
}

.btn__text-mobile {
  display: none;
}

.ti-divider-position {
  bottom: 30px;
}


@include media-breakpoint-up(lg) {
  .ti {
    &__choose_divider {
      line-height: 145px;
    }
  }
}

@include media-breakpoint-up(md) {
  .ti {
    &__prod {
      display: grid;
      grid-template-rows: auto 3fr;
      grid-template-columns: 150px auto;
      grid-auto-flow: row;

      &_img {
        grid-column: 1 / span 1;
        grid-row: 1 / span 2;
      }

      &_title {
        grid-column: 2 / span 1;
        grid-row: 1 / span 1;
      }

      &_list {
        grid-column: 2 / span 1;
        grid-row: 2 / span 1;
      }
    }
  }
}

@include media-breakpoint-only(md) {
  .ti {
    &__floors,
    &__total {
      @include make-col(6);
    }

    &__prod {
      grid-template-columns: 130px auto;
      margin: 10px 0;

      &_img {
        & > img {
          height: 100px;
        }
      }
    }
  }
}

@include media-breakpoint-down(md) {
  .ti {
    &__card {
      @include make-col(12);
    }

    &__error {
      margin-top: 10px;
    }

    &__next {
      margin: 15px 0 0;

      & .btn {
        white-space: normal;
        max-width: 320px;
      }
    }

    &__cost {
      padding-top: 10px;

      &_postcode,
      &_removal,
      &_levelling,
      &_options {
        padding: 20px 15px;
      }

      &_removal,
      &_levelling {
        margin: 10px 0;
      }
    }

    &__choose {
      &_title,
      &_divider {
        padding: 15px 0;
      }

      &_first,
      &_second,
      &_divider {
        @include make-col(12);
      }

      &_divider {
        // sass-lint:disable no-important
        padding-top: 0;
      }

      &_first {
        .ti__error {
          margin-bottom: 15px;
        }
      }
    }

    &__overview {
      @include make-col(12);
      margin-bottom: 15px;

      &-price {
        @include make-col(12);
        padding: 0;

        &_total-rest {
          text-align: right;
          font-size: .875rem;
          font-weight: 700;
          line-height: 22px;
        }

        &_total,
        &_area,
        &_head {
          padding: 8px 15px;
          background: $gray-light;
          height: auto;

          &::after {
            display: none;
          }

          &-text {
            font-size: $font-size-base;
            font-weight: 700;
            line-height: 17px;
          }

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

        &_acess {
          padding: 8px 15px;
        }

        &-estim,
        &_floor-only {
          & .ti__overview-price_total {
            &::before {
              display: none;

            }
          }
        }

        &_floor-only {
          & .ti__overview-price_total {
            padding-top: 15px;
            padding-bottom: 10px;
          }
        }

        &_shortcut {
          padding: 15px 15px 10px;

          &-text,
          &-link {
            text-align: left;
          }
        }
      }
    }

    &__step1-inactive {
      & .ti__estimate {
        @include make-col(12);
      }

      & .ti__total {
        padding-left: 0;
      }

      & .ti-total-area {
        padding: 15px 15px 5px;
      }
    }

    &__total {
      .bw {
        .store__name {
          max-width: 170px;
        }
      }
    }
  }
}

@include media-breakpoint-down(sm) {
  .ti {
    &__step1-return,
    &__step2-return {
      transform: none;
      top: 22px;
    }

    &__floors {
      @include make-col(12);
      padding-right: 0;
    }

    &__total {
      @include make-col(12);
      padding-left: 0;
      margin-top: 10px;
    }

    &__next {
      margin: 10px 0 0;

      & .btn {
        max-width: 100%;
      }
    }

    &__cost {
      &_options {
        &-what {
          font-size: $font-size-base;
        }

        &-list {
          margin-top: 0;
        }

        &-item {
          @include make-col(12);
          margin-top: 10px;
          padding-right: 0;
        }
      }
    }

    &__choose {
      &_title {
        padding: 10px 0;
      }
    }

    &__prod {
      display: block;
      margin: 10px 0;

      &_img {
        float: left;

        & > img {
          height: 80px;
          margin-right: 25px;
        }
      }

      &_title {
        margin-left: 0;
        font-weight: 500;
        padding-bottom: 10px;
      }

      &_list {
        margin-left: 10px;
        list-style-position: outside;
        padding-left: 5px;
        padding-top: 0;
        line-height: 22px;
      }
    }
  }

  .btn__text-desktop {
    display: none;
  }

  .btn__text-mobile {
    display: block;
  }
}