// ============================================================================
// :: Account list
// ============================================================================
/**
 * List of different accounts that the user has under a certain category like
 * a savings account. Makes use of l-grid to make sure it is aligned and behaves
 * correctly responsive-wise
 */

// ============================================================================
// :: Root
// ============================================================================
// .o-account-list {}

.o-account-list--equal-height {
  .o-account-list__item > .m-summary--contained {
    height: 100%;

    .m-summary__container {
      height: 100%;
    }
  }
}

// ============================================================================
// :: Elements
// ============================================================================
.o-account-list__grid {
  @extend %__grid-with-margins-base;

  padding-left: 0;

  list-style-type: none;
}

.o-account-list__item {
  @extend %__grid-with-margins-col-4-12;

  padding-top: 2rem;

  border-top: $border-width-base solid $border-color-1x-light;

  &:first-child {
    padding-top: 0;

    border-top: none;
  }

  @include respond-at($breakpoint-tablet-default) {
    padding: 0;

    border-top: none;
  }

  > * {
    height: 100%;
  }
}

.o-account-list__add,
.o-account-list__show-more {
  margin-top: 2rem;
}

// Limit to max 2 columns when text zoom is large
html[data-text-zoom="large"],
html[data-text-zoom="xlarge"] {
  .o-account-list__item {
  // Match 6/12 widths from the grid system to cap at 2 columns
  width: calc(#{$_grid-col-12} - #{$grid-spacing-mobile-default});

  @include respond-at($breakpoint-tablet-default) {
    width: calc(#{$_grid-col-12} - #{$grid-spacing-tablet-default});
  }

  @include respond-at($breakpoint-desktop-default) {
    width: calc(#{$_grid-col-12} - #{$grid-spacing-desktop-default});
  }

  @include respond-at($breakpoint-desktop-large) {
      width: calc(#{$_grid-col-12} - #{$grid-spacing-desktop-large});
    }
  }
}