/**   */
.list-header {
  view-transition-name: list-header;
}



/**  view-transition-class not-expanded */
.not-expanded {
  view-transition-class: not-expanded;

  * {
    view-transition-class: not-expanded;
  }
}

/**  view-transition-class not-expanded */
.container-transition-list:has(.not-expanded) :is(.list-header, .all-transactions) {
  view-transition-class: not-expanded;
}

/**  .list-header hidden; .all-transactions hidden; .transaction:not(.expanded) hidden; */
.container-transition-list:has(.expanded) {
  .list-header {
    display: none;
  }

  .all-transactions {
    display: none;
  }

  .transaction:not(.expanded) {
    display: none;
  }
}

/**    */
.transaction-list {
  view-transition-name: transaction-list;
}

/**   */
.transaction {
  &.expanded {
    flex-direction: column;
    align-items: flex-start;
    background: #ffffff;

    .transaction-details, 
    .payment-details {
      display: flex;
    }

    .icon-container {
      width: 100%;

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







/**  w-5 h-5 text-white */
.icon svg {
  width: 20px;
  height: 20px;
  color: white;
}




/**  flex flex-col gap-1 border-t border-gray-500 pt-1 w-full hidden */
.transaction-details, 
.payment-details {
  border-top: 1px dotted #71717a;
  display: none;
}

/**  view-transition-class transaction-details */
.transaction-details {
  view-transition-class: transaction-details;
}

/**  view-transition-class payment-details */
.payment-details {
  view-transition-class: payment-details;
}

/**   view-transition-name all-transactions */
.all-transactions {
  view-transition-name: all-transactions;
}

/**   */
.close-btn {
  display: none;
}

/**  keyframes slide-up */
@keyframes slide-up {
  from {
    opacity: 0;
    margin-top: 30px;
  }
  to {
    opacity: 1;
    margin-top: 0;
  }
}

/**  keyframes fade-out */
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/**  keyframes squash */
@keyframes squash {
  0% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0);
  }
}

/**  animation-duration-400 animation-timing-function-cubic-bezier(0.33, 1, 0.68, 1) */
::view-transition-group(*) {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
}

/**  height-full */
::view-transition-old(*),
::view-transition-new(*) {
  height: 100%;
}

/**  &::view-transition-group(.transaction-details), &::view-transition-group(.payment-details) animation-name slide-up animation-duration-500 */
html:active-view-transition-type(expand) {
  &::view-transition-group(.transaction-details),
  &::view-transition-group(.payment-details) {
    animation-name: slide-up;
    animation-duration: 0.5s;
  }

}

/**  &::view-transition-group(.transaction-details), &::view-transition-group(.payment-details) animation-name fade-out */
html:active-view-transition-type(collapse) {
  &::view-transition-group(.transaction-details),
  &::view-transition-group(.payment-details) {
    animation-name: fade-out;
  }
}

/**  &::view-transition-group(.not-expanded) animation-name fade-out */
::view-transition-group(.not-expanded) {
  animation-name: fade-out;
}