.notifications {
  &-container {
    width: 20rem;
    display: flex;
    flex-direction: column;

    @include media-breakpoint-down(sm) {
      width: 100%;
    }
  }

  &-header {
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(33, 37, 41, 0.1);
    flex-shrink: 0;
    font-size: 1rem;
    background: $primary;
    color: white;
  }

  &-list {
    padding: 0.5rem 0;
    margin: 0;
    list-style: none;
    max-height: 400px;
    overflow-y: auto;
  }

  &-item {
    &-body {
      overflow: hidden;
    }

    &-icon {
      margin-right: 0.75rem;
    }

    &-link {
      display: flex;
      align-items: center;
      padding: 0.5rem 1rem;
      line-height: 1.25;
      text-decoration: none;
      color: var(--link-color-dark);
      font-weight: bold;

      &:hover {
        background: #eaeaea;
        text-decoration: none;
      }

      &-read {
        font-weight: 500;
      }
    }

    &-title {
      font-size: 0.875rem;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    &-subtitle {
      overflow: hidden;
      color: #6c757d;
      font-size: 0.8125rem;
      margin-top: 0.125rem;
    }
  }

  &-footer {
    border-top: 1px solid rgba(33, 37, 41, 0.1);
    color: #6c757d;
    font-size: 0.8125rem;
    flex-shrink: 0;

    &-action {
      padding: 0.375rem 1rem calc(0.375rem + 1px);
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: inherit;
      transition: background-color 0.12s ease-out;
      text-decoration: none;

      &:hover {
        text-decoration: none;
        background: #eaeaea;
      }

    }
  }

  .dropdown-menu {
    @include media-breakpoint-down(sm) {
      width: calc(100vw - 1rem)!important;
      left: 24px!important;
    }
  }
}