.reservations-panel {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  .title { @include text-base(600); }
  p { margin: 0; }

  .reservations {
    padding: 1.6rem;
    background-color: var(--gray-soft-lightest);
    border-radius: var(--border-radius);
  }

  .reservations-list {
    display: grid;
    grid-template-columns: 1fr minmax(25%, max-content);
    gap: 0 1.6rem;
    .name { grid-column: 1 / 2; }
    .date { grid-column: 2 / 3; }
    &-label {
      @include text-xs;
      color: var(--gray-soft-darkest);
    }

    &-item {
      display: contents;
      @include text-base(600);
      .date{
        margin-bottom: 1.6rem;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
      }
      &.canceled {
        text-decoration: line-through;
      }
    }

  }
  .reservations-list.is-history {
    margin-top: 2.4rem;
    .reservations-list-label {
      margin-bottom: 0.8rem;
      padding-bottom: 0.8rem;
      grid-column: 1 / -1;
      border-bottom: 1px solid var(--gray-soft-dark);
    }
    .reservations-list-item {
      font-weight: 400;

      &.cancelled {
        color: var(--gray-soft-darkest);
      }

      .date p.cancelled {
        color: var(--gray-soft-darkest);
      }
    }
  }

  .no-reservations {
    display: block;
    @include text-sm;
    font-style: italic;
    text-align: center;
    color: var(--gray-soft-darkest);
  }

  .show-more {
    width: fit-content;
    margin-top: 1rem;
  }
}
