@use "sass:color";
/*#############################################################################
# MY PRODUCTS
#############################################################################*/


// Products Box Base Styles
// To be extended
.my-products-base-box {
  background-color: #fff;
  padding: 20px 30px;
  @include border-radius(4px);
  @include box-shadow(-2px 2px 6px 0 rgba(black, 0.05));
}

.my-products-list-wrapper {
  max-width: 1000px;
  margin: 0 auto;

  .product-box {
    display: grid;
    grid-template-columns: repeat(4, 1fr) 120px;
    justify-items: center;
    margin: 0 0 20px;
    @extend .my-products-base-box;
    // @extend %transition-all;

    @include responsive-max($breakpoint-small) {
      grid-template-columns: none;
      grid-gap: 1rem;

      .credit-id {
        justify-self: center !important;
      }

      .product-box-column {
        padding: 0 !important;
        text-align: center !important;

        .product-box-title {
          margin: 0;
        }
      }

      .credit-actions {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
        a.product-box-action {
          opacity: 1;

          &.small {
            font-weight: 900;
            padding: 10px 20px;
          }
        }
      }
    }

    &:last-child {
      margin: 0;
    }

    // General Box Columns
    .product-box-column {
      padding: 0 20px;

      &:first-child {
        padding-left: 0;
      }

      &:last-child {
        padding-right: 0;
      }
    }

    // Specific Box Columns
    .credit-id {
      justify-self: start;
    }

    // Content Elements

    .product-box-title {
      color: $color-secondary;
      font-size: rem-calc(10px);
      text-transform: uppercase;
      margin: 0 0 10px;
    }

    .product-box-content {
      font-size: rem-calc(14px);
      margin: 0;
    }

    .product-box-credit-amount {
      font-size: rem-calc(20px);
      margin: 0;
    }

    .progress-bar {
      min-width: 120px;
      margin-top: 18px;
    }

    .product-box-payment-status {
      font-size: rem-calc(12px);
      font-weight: 900;
      margin: 0;
    }

    a.product-box-action {
      display: block;
      opacity: 0;
      font-size: rem-calc(12px);
      text-align: center;
      margin: 0 0 12px;

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

    // HOVER STATE

    &:hover {
      @include box-shadow(-6px 6px 10px 0 rgba(black, 0.075));

      a.product-box-action {
        opacity: 1;
      }
    }
  }
}

header.product-details {
  margin: 0 0 40px;

  .product-details-id {
    color: $color-secondary;
    font-size: rem-calc(14px);
    text-transform: uppercase;
    margin: 0;
  }

  .product-details-amount {
    font-size: rem-calc(28px);
    margin: 0 0 30px;
  }

  // Secondary Info container
  .secondary-product-info {
    display: flex;
    flex-flow: row wrap;

    .product-info-box {
      margin-right: 70px;
    }

    // Content Elements
    .product-info-title {
      color: $color-secondary;
      font-size: rem-calc(12px);
      text-transform: uppercase;
      margin: 0;
    }

    .product-info-value {
      font-size: rem-calc(14px);
      font-weight: 900;
      margin: 0;
    }
  }
}

.product-details-wrapper {
  display: grid;
  grid-template-columns: 1fr 360px;
  grid-column-gap: 30px;
  margin: 0 0 40px;

  @include responsive-max($breakpoint-small) {
    grid-template-columns: none;
    grid-gap: 1rem;
  }

  &:last-child {
    margin: 0;
  }

  // Product Details Box Structure Elements
  .product-details-box {
    @extend .my-products-base-box;
    min-height: 500px;
    padding: 0;

    header.product-details-header {
      padding: 20px 20px 0;
      border-bottom: 1px solid $color-secondary-light;

      nav {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-evenly;

        a {
          color: $color-secondary;
          font-size: rem-calc(14px);
          padding: 0 5px 15px;

          @include responsive-max($breakpoint-small) {
            width: 50%;
            text-align: center;
            margin-bottom: 15px;
          }

          &.active {
            border-bottom: 2px solid $color-primary;
            color: $color-primary;
            font-weight: 900;
          }

          &:hover {
            color: color.adjust($color-secondary, $lightness: -20%);
          }
        }
      }
    }

    .box-content {
      padding: 30px;

      .col {
        &:first-child {
          padding: 0 30px 0 20px;
        }

        &:last-child {
          padding: 0 20px 0 30px;
        }
      }
    }

    footer.product-details-footer {
      border-top: 1px solid $color-secondary-light;
      padding: 20px 60px;
      @include border-bottom-radius(4px);

      a {
        display: inline-block;
        font-size: rem-calc(14px);
        font-weight: 900;
      }
    }
  }

  // Content Elements

  h5.payments-table-title {
    font-size: rem-calc(14px);
    margin: 0 0 20px;
  }

  header.payment-details-header {
    margin-bottom: 20px;
    @include pie-clearfix;

    h6 {
      font-size: rem-calc(14px);
      margin: 0;
      @include float(left);
    }

    p {
      color: $color-secondary;
      font-size: rem-calc(14px);
      font-weight: 900;
      margin: 0;
      @include float(right);
    }
  }

  a.next-installment-pay {
    display: block;
    text-align: center;
    margin: 30px 0;
  }

  p.next-installment-text {
    font-size: rem-calc(12px);
    margin: 0;
  }

  footer.next-installment {
    border-top: 1px solid $color-secondary-light;
    margin-top: 15px;
    padding-top: 15px;

    p {
      font-size: rem-calc(12px);
      margin: 0;

      a {
        font-weight: bold;
      }
    }
  }

  p.payment-simulator {
    font-size: rem-calc(14px);
    margin: 20px 0 0;
    padding: 0 20px;
  }
}

ul.payments-table {
  border-bottom: 1px solid $color-secondary-light;
  list-style: none;
  margin: 0 0 15px;
  padding: 0 0 15px;

  li {
    margin: 0 0 10px;
    padding-left: 15px;
    position: relative;
    @include pie-clearfix;

    &:last-child {
      margin: 0;
    }

    &::before {
      content: "";
      display: block;
      background-color: $color-primary;
      width: 5px;
      height: 5px;
      position: absolute;
      top: 50%;
      left: 0;
      @include border-radius(10px);
      @include transform(translateY(-50%));

    }
  }

  &.no-decoration {
    li {
      padding-left: 0;

      &::before {
        display: none;
      }
    }
  }
}

ul.payments-history {
  list-style: none;
  margin: 0;
  padding: 0;

  li {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 30px;
    align-items: center;
    border-bottom: 1px solid $color-secondary-light;
    padding: 10px 0;

    &:last-child {
      border-bottom: none;
    }

    .history-box {
      span {
        display: block;

        &.installment {
          color: $color-secondary;
          font-size: rem-calc(12px);
        }

        &.date {
          font-size: rem-calc(14px);
        }

        &.amount {
          font-size: rem-calc(14px);
          font-weight: 900;
          text-align: right;

          &.penalty {
            color: $color-alert;
            font-size: rem-calc(12px);
            font-weight: 400;
          }
        }
      }

      &.left {
        justify-self: start;
      }

      &.right {
        justify-self: end;
      }
    }
  }
}

ul.statements-history {
  list-style: none;
  margin: 0;
  padding: 0;

  li {
    display: grid;
    grid-template-columns: 24px 1fr 1fr;
    grid-column-gap: 15px;
    align-items: center;
    border-bottom: 1px solid $color-secondary-light;
    padding: 10px 0;

    &:last-child {
      border-bottom: none;
    }

    img.icon {
      display: block;
      width: 100%;
    }

    .history-box {
      span {
        display: block;

        &.statement {
          color: $color-secondary;
          font-size: rem-calc(12px);
        }

        &.date {
          font-size: rem-calc(14px);
        }

        &.actions {
          font-size: rem-calc(14px);
          font-weight: 900;
          text-align: right;
        }
      }

      &.left {
        justify-self: start;
      }

      &.right {
        justify-self: end;
      }
    }
  }
}

ul.documents-history {
  list-style: none;
  margin: 0;
  padding: 0;

  li {
    display: grid;
    grid-template-columns: 24px 1fr 1fr;
    grid-column-gap: 15px;
    align-items: center;
    border-bottom: 1px solid $color-secondary-light;
    padding: 10px 0;

    &:last-child {
      border-bottom: none;
    }

    img.icon {
      display: block;
      width: 100%;
    }

    .history-box {
      span {
        display: block;

        &.document {
          font-size: rem-calc(14px);
        }

        &.file-size {
          color: $color-secondary;
          font-size: rem-calc(12px);
        }

        &.actions {
          font-size: rem-calc(14px);
          font-weight: 900;
          text-align: right;
        }
      }

      &.left {
        justify-self: start;
      }

      &.right {
        justify-self: end;
      }
    }
  }
}

span.payments-table-item-title {
  font-size: rem-calc(12px);
  font-weight: 900;
  @include float(left);
}

span.payments-table-item-value {
  font-size: rem-calc(12px);
  @include float(right);
}

.payments-table-totals {
  @include pie-clearfix;

  span.item-title {
    font-size: rem-calc(13px);
  }

  span.item-value {
    font-size: rem-calc(13px);
    font-weight: 900;
  }

  &.large {
    span {
      font-size: rem-calc(14px);
    }
  }
}

p.payment-simulation-result {
  font-size: rem-calc(14px);
  margin-top: 30px;
}