// ============================================================================
// :: Notification
// ============================================================================
/**
 * Component used to display the notification with its state containing a
 * title, description (optional) and a date
 */

// ============================================================================
// :: Root
// ============================================================================
.m-notification {
  @extend %__icon-chevron-right;

  position: relative;

  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1.6rem 0;

  // Style the icon
  &::before {
    order: 2;

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

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

// ============================================================================
// :: Elements
// ============================================================================
.m-notification__link {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;
}

button.m-notification__link {
  padding: 0;

  border: none;
  background: transparent;

  cursor: pointer;
}

.m-notification__content,
.m-notification__info-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.m-notification__content {
  width: 100%;

  @include respond-to($breakpoint-tablet-default) {
    align-items: flex-start;
  }
}

.m-notification__info-container {

  @include respond-to($breakpoint-tablet-default) {
    flex-direction: column;
    align-items: flex-start;
  }
}

.m-notification__icon,
.m-notification__date {
  margin-right: 2rem;
}

.m-notification__date {

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

.m-notification__date,
.m-notification__title {
  font-size: $font-size-base;
  font-weight: $font-weight-bold;
  line-height: $line-height-base;
}

.m-notification__icon-visual {

  @include respond-at($breakpoint-tablet-default) {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  // Style the icon
  &::before {
    font-size: $icon-size-2x-large;
    line-height: $line-height-normalize;
  }
}

.m-notification__icon {
  display: flex;
  justify-content: flex-start;
  align-items: center;

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

.m-notification__date {

  @include respond-to($breakpoint-tablet-default) {
    order: 2;

    font-size: $font-size-1x-small;
    font-weight: $font-weight-regular;

    color: $text-color-medium;
  }

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

  @include respond-at($breakpoint-desktop-default) {
    min-width: 20rem;
  }
}

.m-notification__description {
  color: $text-color-medium;
}

.m-notification__attachment {
  margin-left: 2rem;

  // Style the icon
  &::before {
    font-size: $icon-size-2x-large;
    line-height: $line-height-normalize;
  }
}

// ============================================================================
// :: States
// ============================================================================
.m-notification {

  &.is-read {

    .m-notification__date,
    .m-notification__title {
      font-weight: $font-weight-regular;
    }

    .m-notification__icon-visual {

      // Style the icon

      &::before {
        color: $text-color-medium;
      }
    }
  }

  &.is-message {

    .m-notification__icon-visual {
      @extend %__icon-mail;
    }
  }

  &.is-file {

    .m-notification__icon-visual {
      @extend %__icon-file;
    }
  }

  &.has-attachment {

    .m-notification__attachment {
      @extend %__icon-paperclip;
    }

    &.is-message {

      .m-notification__icon-visual--mobile {
        @extend %__icon-mail-attachment;
      }
    }

    &.is-file {

      .m-notification__icon-visual--mobile {
        @extend %__icon-file-attachment;
      }
    }
  }
}