@import '../helpers/helpers';

.track-order {
  padding: 0;

  &__wrap {
    padding-top: 24px;
    padding-bottom: 40px;
  }

  &__main {
    margin-top: 24px;

    .title {
      font-size: 1.625rem;
      font-weight: 500;
      line-height: 2.25rem;
      margin-bottom: 0;
    }
  }

  &-form {
    margin-top: 16px;

    .form-row {
      padding: 0;
      margin: 0;

      &__label,
      &__field {
        padding: 0;
      }

      &__label {
        display: flex;
        align-items: center;
      }

      &__error {
        padding: 0;
      }

      .icon-info-component {
        display: flex;
        align-items: center;
        justify-items: center;
        width: 16px;
        height: 16px;
        margin-left: 4px;
        font-size: .675rem;
      }
    }

    &__options {
      margin-top: 16px;

      .nav {
        grid-gap: 16px 24px;
        display: flex;
        flex-wrap: wrap;

        &__label {
          margin-bottom: 0;
        }
      }

      .tab-content {
        margin-top: 16px;
      }
    }

    .btn--track-order {
      margin-top: 16px;
    }
  }

  &:has(.my-order) {
    .track-order__wrap {
      padding-bottom: 0;
    }
  }

  .my-order .btn--print {
    margin-top: 12px;
    display: none;
  }
}

.order-info {
  border: 1px solid $gray;
  border-radius: 4px;
  padding: 16px;
  position: relative;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;

  &__toggle {
    margin-bottom: 0;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.5rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    .icon-wrap {
      display: flex;
      align-items: center;
      justify-content: center;

      &:after {
        content: '+';
        color: $blue;
        font-size: 1.575rem;
      }
    }

    &[aria-expanded='true'] {
      .icon-wrap {
        &:after {
          content: '-';
          font-size: 2.95rem;
        }
      }
    }
  }

  &__list {
    padding-left: 20px;
    margin-top: 16px;
    margin-bottom: 0;
  }

  &__paragraph {
    margin-top: 8px;
    margin-bottom: 0;
  }

  .icon-wrap {
    cursor: pointer;

    .icon {
      color: $blue;
    }
  }
}

.icon-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 24px;
  width: 24px;

  .icon {
    height: auto;
    font-size: 1rem;
  }
}

@media print {
  .sticky-wrapper,
  .header-wrapper,
  .main-nav,
  .breadcrumbs,
  .new-usp-container .new-usp-bar,
  .track-order__wrap,
  .btn--print,
  .account-actions,
  footer,
  wickes-chat {
    display: none;
  }
}

@include media-breakpoint-up(sm) {
  .track-order .my-order .btn--print {
    margin-top: 0;
  }
}

@include media-breakpoint-up(md) {
  .order-info {
    padding: 24px 40px;
  }

  .track-order {
    &__wrap {
      padding-bottom: 70px;
    }

    &__main {
      border: 1px solid $gray;
      border-radius: 4px;
      padding: 40px;

      .title {
        text-align: left;
        font-size: 2.125rem;
        font-weight: 500;
        line-height: 2.875rem;
      }
    }

    .my-order {
      padding: 0;

      .btn--print {
        display: flex;
      }
    }

    &-form,
    &-form__options,
    &-form .tab-content,
    &-form .btn--track-order {
      margin-top: 24px;
    }

    &-form__options {
      & > .form-row__label {
        margin-bottom: 16px;
      }
    }
  }
}

@include media-breakpoint-up(lg) {
  .track-order {
    &__main {
      margin-top: 0;
      width: 100%;
    }

    &__wrap {
      display: flex;
      flex-direction: row-reverse;
      grid-gap: 24px;
      padding-top: 40px;
    }

    &:has(.my-order) {
      .track-order__wrap {
        padding-bottom: 0;
      }

      .my-order {
        padding-top: 40px;
      }
    }
  }

  .order-info {
    width: 100%;
    padding-top: 40px;
    padding-bottom: 40px;

    &__toggle {
      pointer-events: none;

      .icon-wrap {
        display: none;
      }
    }

    .collapse {
      display: flex;
      flex-direction: column;
    }
  }
}