// ============================================================================
// :: Account detail
// ============================================================================

// ============================================================================
// :: Root
// ============================================================================
.p-account-detail {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;

  width: 100%;
}

// ============================================================================
// :: Elements
// ============================================================================
.p-account-detail__grid {
  @extend %__grid-with-margins-base;
  @extend %__grid-with-margins-desktop;
}

.p-account-detail__summary,
.p-account-detail__transactions {
  @extend %__grid-with-margins-col-desktop;

  @include respond-between(
    $breakpoint-tablet-default,
    $breakpoint-desktop-large
  ) {
    width: calc(100% - #{$container-spacing-tablet-default});
  }
}

// Apply full-width columns only when text zoom is 200%
html[data-text-zoom="large"],
html[data-text-zoom="xlarge"] {
  .p-account-detail__summary,
  .p-account-detail__transactions {
    min-width: 100%;
  }
}

.p-account-detail__summary {
  @extend %__grid-with-margins-col-5-12;

  &:not(:last-child) {
    .l-section {
      @extend %__block-shadow-mobile;
    }
  }

  .l-section {
    @extend %__block-base;
  }

  .l-section__footer .a-button {
    @include respond-between(
      $breakpoint-tablet-default,
      $breakpoint-desktop-large
    ) {
      width: auto;
    }
  }
}

.p-account-detail__transactions {
  @extend %__grid-with-margins-col-7-12;

  .l-section {
    @extend %__block-grey-mobile;
  }
}