/* stylelint-disable -- Exception */

.account-order {
  $block: #{&};

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

  @include grid(1fr auto auto, 1fr auto, $whitespace-7 $whitespace-8);

  max-inline-size: 60rem;
  padding: $whitespace-6;
  container-type: inline-size;
  border: 0.1rem solid $color-neutral-7;

  &__top-container {
    @include flex(row, nowrap, $whitespace-8, flex-start, space-between);
  }

  &__bottom-container {
    @include flex(row, wrap, $whitespace-6, null, space-between);

    grid-column: 1 / -1;
    align-self: flex-end;

    @include media-down(mobile-l) {
      column-gap: 0;
    }

    &--wrapped {
      #{$block}__detail:last-child {
        padding-inline-end: $whitespace-6;
        border-inline-end: 0.1rem solid $color-neutral-7;
      }
    }
  }

  &__detail {
    @include flex(column, nowrap, $whitespace-3);

    &:not(:last-child) {
      padding-inline-end: $whitespace-6;
      border-inline-end: 0.1rem solid $color-neutral-7;
    }
  }

  &__detail-heading,
  &__detail-value {
    font-size: $font-size-3;

    @include media-down(tablet-xs) {
      font-size: $font-size-2;
    }
  }

  &__detail-heading {
    font-weight: $font-weight-semi-bold;
  }

  &__detail-value {
    &--style {
      &--neutral {
        color: $color-neutral-7;
      }

      &--warning {
        color: $color-status-warning;
      }

      &--success {
        color: $color-status-success;
      }

      &--danger {
        color: $color-status-error;
      }
    }
  }

  &__button-group {
    @include flex(column, nowrap, $whitespace-3);

    &:not(:has(> :nth-child(2))) {
      @container (max-width: 54rem) {
        button {
          flex: 1;
        }
      }
    }

    @container (max-width: 54rem) {
      flex-direction: row-reverse;
      grid-row: -1;
      grid-column: span 2;
      justify-content: space-between;
    }
  }

  &__image-list {
    @include remove-list-styles;
    @include flex(row, wrap, $whitespace-5);

    @container (max-width: 54rem) {
      grid-column: span 2;
    }
  }

  &__image-wrapper {
    @include size(10rem, 10rem);

    position: relative;
  }

  &__image {
    @include size(100%, 100%);

    object-fit: fill;
    object-position: center;
  }
}