// scss-lint:disable SelectorDepth unknownProperties
// scss-lint:disable NestingDepth SelectorFormat

.sci--navigation--notificaitons-flyout-container {
  position: relative;

  .has-unseen {
    &::after {
      align-items: center;
      background-color: $brand-focus;
      border-radius: .5rem;
      color: $color-white;
      content: attr(data-unseen);
      display: flex;
      font-size: 10px;
      height: 1rem;
      justify-content: center;
      left: 1.25rem;
      min-width: 1rem;
      padding: 0 .25rem;
      position: absolute;
      top: 0;
      white-space: nowrap;
    }
  }
}

  .sci--navigation--notificaitons-flyout {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 8rem);
    padding: 1.5rem;
    width: 400px;

  .sci--navigation--notificaitons-flyout-title {
    @include font-h2;
    align-items: center;
    display: flex;
    margin-bottom: .625rem;

    .sn-icon {
      @include font-button;
      cursor: pointer;
      margin-left: auto;
    }
  }

  hr {
    margin: .625rem 0;
  }

  .sci-navigation--notificaitons-flyout-subtitle {
    @include font-main;
    line-height: 2.25rem;
    margin-bottom: .625rem;
  }

  .sci--navigation--notificaitons-flyout-notifications {
    margin-left: -1.5rem;
    overscroll-behavior: contain;
    padding: 0 1.5rem;
    position: relative;
    width: calc(100% + 3rem);

    .next-page-loader {
      align-items: center;
      display: flex;
      justify-content: center;
      margin: 1rem 0;
    }
  }

  .sci-navigation--notificaitons-flyout-notification {
    border-bottom: $border-tertiary;
    padding: 1rem 0;

    .sci-navigation--notificaitons-flyout-notification-icon {
      align-items: center;
      background-color: $brand-primary;
      border-radius: 50%;
      color: $color-white;
      display: flex;
      grid-row: 1 / 5;
      height: 2rem;
      justify-content: center;
      margin-right: .75rem;
      width: 2rem;

      &.deliver {
        background-color: $brand-warning;
      }

      &.system {
        background-color: $brand-success;
      }
    }

    .sci-navigation--notificaitons-flyout-notification-date {
      @include font-small;
      color: $color-silver-chalice;
    }

    .sci-navigation--notificaitons-flyout-notification-title {
      margin: .25rem 0;

      &:not([data-seen="true"]) {
        font-weight: bold;
      }
    }

    .sci-navigation--notificaitons-flyout-notification-message {
      &[data-notification="system"] {
        cursor: pointer;
      }
    }
  }
}