/* stylelint-disable -- Exception */

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

  @include position(fixed, 0, 0, 0, 0);
  @include flex(row, nowrap, null, center, center);

  z-index: 999999999999;
  padding-inline: $whitespace-8;
  background-color: rgb($color-neutral-2, 0.9);
  backdrop-filter: blur(2);

  @include media-down(mobile-l) {
    padding-inline: $whitespace-7;
  }

  &__wrapper {
    @include flex(column);

    inline-size: 100%;
    max-inline-size: 55rem;
    background-color: $color-neutral-1;
    border: 0.1rem solid $color-neutral-10;
  }

  &__button {
    align-self: flex-end;
  }

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

    max-block-size: 55rem;
    padding: 0 $whitespace-8 $whitespace-8;
    overflow-block: auto;

    @include media-down(tablet-xxs) {
      text-align: center;
    }

    @include media-down(mobile-l) {
      padding-inline: $whitespace-5;
    }
  }

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

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

  &__order-details-container {
    @include flex(column, nowrap, $whitespace-6);

    padding-block: $whitespace-7;
    border-block-start: 0.2rem solid $color-neutral-7;
  }

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

    padding-block: $whitespace-7;
    border-block: 0.2rem solid $color-neutral-7;
  }

  &__detail,
  &__total-container {
    @include flex(row, nowrap, null, center, space-between);
  }

  &__detail-heading {
    font-size: $font-size-3;
    color: $color-neutral-7;
  }

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

  &__total-heading {
    font-size: $font-size-4;
    font-weight: $font-weight-semi-bold;
  }

  &__total-value {
    font-size: $font-size-6;
    font-weight: $font-weight-semi-bold;
  }

  &--type-admin {
    #{$block}__wrapper {
      inline-size: auto;
      max-inline-size: none;
    }

    #{$block}__body {
      @include flex(row, nowrap, $whitespace-12);
    }
  }

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

  &__user-detail {
    @include flex(row, nowrap, $whitespace-3);
  }

  &__user-detail-icon {
    inline-size: 2.5rem;
  }

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