@use "_variables" as *;
@use "_mixins" as *;

.content {
  scrollbar-color: auto;
  background: pvar(--bg-secondary-400);

  @include padding(2rem);
}

header,
footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header {
  @include margin-bottom(1.5rem);

  .title {
    color: pvar(--fg-300);
    font-size: 22px;
    font-weight: $font-bold;
  }
}

footer {
  @include margin-top(1.5rem);
}

::ng-deep {
  .dropdown-notifications {
    .dropdown-menu {
      padding: 0;
      font-family: $main-fonts;
      width: 550px;
      max-width: 75vw;

      .loader {
        display: flex;
        align-items: center;
        justify-content: center;

        padding: 5px 0;
      }

      .content {
        max-height: 250px;
        transition: max-height 0.15s ease-out;
        display: flex;
        height: 500px;
        flex-direction: column;

        &.loaded {
          max-height: 500px;
        }

        > my-user-notifications:nth-child(2) {
          overflow-y: auto;
          flex-grow: 1;
        }
      }
    }
  }
}

.notification-inbox-dropdown,
.notification-inbox-link {
  cursor: pointer;
  position: relative;
  display: inline-block;

  .unread-notifications {
    // Use margin left and not start here on purpose
    margin-left: 20px;
  }

  .unread-notifications {
    position: absolute;
    top: 6px;
    left: 0;

    background-color: pvar(--primary);
    color: pvar(--on-primary);
    font-weight: $font-bold;
    font-size: 10px;

    border-radius: 16px;

    line-height: 16px;
    padding: 0 3px;
    min-width: 16px;
  }
}
