.checkout-panel {
  $block: #{&};

  @include flex(column, nowrap, $whitespace-8);

  inline-size: 100%;
  max-inline-size: 40rem;
  white-space: nowrap;

  &__section {
    @include flex(column, nowrap, $whitespace-6);
  }

  &__sections-container {
    @include flex(column, nowrap, $whitespace-7);
  }

  &__details-heading {
    font-size: $font-size-6;
    font-weight: $font-weight-semi-bold;
  }

  &__details-container {
    @include flex(column, nowrap, $whitespace-4);

    padding: $whitespace-5;
    border: 0.1rem solid $color-neutral-10;
  }

  &__detail {
    @include flex(row, nowrap, $whitespace-4);
  }

  &__detail-icon {
    @include size(2rem, 2rem);
  }

  &__detail-value {
    font-size: $font-size-3;
  }

  &__body {
    @include flex(column, nowrap, $whitespace-5);
  }

  &__error-message {
    font-size: $font-size-3;
    font-weight: $font-weight-semi-bold;
    color: $color-status-error;
  }
}