// ============================================================================
// :: Account detail
// ============================================================================
/**
 * Detail page of a notification item containing either the message or the
 * downloadable document
 */

// ============================================================================
// :: Root
// ============================================================================
.p-notifications-detail {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  height: 100%;
  overflow: auto;
}

// ============================================================================
// :: Elements
// ============================================================================
.p-notifications-detail__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  flex-grow: 1;

  padding-top: 0;

  // overwriting the 100% height of this component on page level.
  .l-container {
    height: auto;
  }
}

// ============================================================================
// :: Modifiers
// ============================================================================
.p-notifications-detail--file-preview {
  @extend %__icon-image-placeholder;

  position: relative;
  z-index: $z-index-floor;

  background-color: $background-color-base;

  // Style the icon
  &::before {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: $z-index-pit;
    transform:
      translateX(-50%)
      translateY(-50%);

    font-size: $icon-size-5x-large;

    color: $text-color-3x-light;
  }

  .o-header {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;

    background-color: rgba($background-color-dark, 0.5);
  }

  .l-section__content {
    overflow: auto;
  }
}