// ============================================================================
// :: Notifications
// ============================================================================
/**
 * A very large component consisting out of sections which represent each month
 * with its notifications
 */

// ============================================================================
// :: Root
// ============================================================================
.o-notifications {
  width: 100%;

  @include respond-at($breakpoint-tablet-default) {
    overflow: hidden;
    padding-bottom: 2rem;

    border-radius: $border-radius-1x-large;
    background-color: $background-color-white;
  }
}

// ============================================================================
// :: Elements
// ============================================================================
.o-notifications__year {
  margin-bottom: 3.5rem;

  @include respond-at($breakpoint-tablet-default) {
    margin-bottom: 0;
  }

  &:last-child {
    margin-bottom: 0;
  }
}

.o-notifications__header {

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

    background-color: $background-color-light;
  }
}

// Year label: visible on mobile; from tablet up the month header (h3) is shown — keep this h2 for AT only (not display:none).
.o-notifications__header--year {
  @include respond-at($breakpoint-tablet-default) {
    padding: 0;
    background-color: transparent;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    white-space: nowrap;
  }
}

.o-notifications__month {
  width: 100%;

  &:last-child {

    @include respond-at($breakpoint-tablet-default) {
      border-bottom: $border-width-base solid $border-color-1x-light;
    }
  }
}

.o-notifications__list {
  padding-left: 0;

  list-style-type: none;
}

.o-notifications__month-text,
.o-notifications__year-text {
  font-size: $font-size-base;
  font-weight: $font-weight-regular;
  line-height: $line-height-base;
  text-transform: uppercase;

  color: $text-color-medium;
}

.o-notifications__year-text {

  @include respond-to($breakpoint-tablet-default) {
    font-size: $font-size-1x-large;
    font-weight: $font-weight-bold;

    color: $text-color-base;
  }
}

.o-notifications__item {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;

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

  &:last-child {

    @include respond-at($breakpoint-tablet-default) {
      border-bottom: none;
    }
  }

  @include respond-at($breakpoint-tablet-default) {
    min-height: 8rem;
  }

  .m-notification {

    @include respond-at($breakpoint-tablet-default) {
      padding-left: 1.6rem;
      padding-right: 1.6rem;
    }
  }
}

// ============================================================================
// :: Root
// ============================================================================
.o-notifications--simulate-list {

  .o-notifications__header {
    display: none;
  }

  .o-notifications__year {
    margin-bottom: 0;
  }
}