Total: Default

.c-total {
  background-color: #fff;
  text-align: right;
  padding: remify(16px);
  color: secondary(text, 100);

  main & {
    grid-column: main;
  }

  span {
    font-size: 150%;
    color: secondary(text, 100);
    @include min-screen( bp(tablet) ) {
      font-size: 200%;
    }
  }

}
.c-total__label {
  font-weight: fw(light);

  .c-total__fullprice {
    text-decoration: line-through;
    font-size: remify(16px);
    vertical-align: middle;
  }

  @include max-screen( bp(phone-p) ) {
      display: block;
    }
}

.c-total__price {
  font-weight: fw(bold);
  margin-left: remify(24px);
}

.c-total__list {
  @include font-scale(level-1-5);
  color: secondary(text, 100);

  @include min-screen(bp(tablet)) {
    @include font-scale(level-2);
  }

  .list-item {
    display: flex;
    justify-content: space-between;
  }

  .list-item + .list-item {
    margin-top: remify(8px);
  }

  .list-item__value {
    font-weight: fw(bold);
  }

  .list-item--small {
    @include font-scale(level-1);
  }

  .list-item--collapsible {
    position: relative;
    
    .list-item__value--abs {
      position: absolute;
      right: 0;
      top: 0;
    }
  }

  .c-collapsible {
    width: 100%;
  }

  .c-collapsible__button {
    font-weight: fw(bold);
    color: primary(night, 100);
  }

  .o-collapsible__content {
    margin-top: remify(8px);
  }

}

/*------------------------------------*\
  Checkout modifier
\*------------------------------------*/

.c-total--checkout {
  text-align: right;

  button {
    display: block;
    margin-left: auto;

    @include min-screen( bp(tablet) ) {
      margin-right: 0;
    }
  }
}

/*------------------------------------*\
  Payment type modifier
\*------------------------------------*/

.c-total--payment-type {
  display: flex;
  flex-direction: column;
  gap: remify(16px);

  @include min-screen(bp(tablet)) {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: remify(24px);
  }

  .c-total__payment-detail-text {
    text-align: left;

    p + p {
      margin-top: remify(8px);
    }
  }

  .c-total__values {
    @include min-screen(bp(tablet)) {
      width: remify(400px);
    }
  }

  &:has(.c-total__list) {

    .c-total__final-price {
      display: flex;
      justify-content: space-between;
      border-top: remify(1px) solid primary(night, 20);
      padding-top: remify(12px);
      margin-top: remify(8px);
    }
  }

}