// Topbar Dropdown Menu

.topbar-dropdown-menu {
  max-width: 425px;
  // padding: 2rem 1rem;

  /* componet global styling start */

  h1 {
    font-size: 20px;
    line-height: 32px;
    padding-left: 20px;
    font-weight: 600;
    color: $ot-text-primary;
  }

  /* Componet global styling end */

  .topbar-dropdown-content {
    :last-child::before {
      content: none !important;
    }

    .topbar-dropdown-item {
      padding: 0px;
      padding: 20px;
      border-radius: 5px;
      position: relative;

      &:hover {
        background-color: $ot-bg-primary;
      }

      &::before {
        @include psudo-divider;
        left: 12px;
        right: 12px;
      }

      &:active {
        color: #1e2125;
        background-color: #e9ecef;
      }
      white-space: normal;
      gap: 1rem;

      /* dropdown item avater start */

      .item-avater {
        min-width: 50px;
        min-height: 50px;
        max-width: 50px;
        max-height: 50px;
        border-radius: 50%;
        position: relative;
        img {
          width: 100%;
          height: 100%;
        }

        .item-badge {
          position: absolute;
          right: 0;
          bottom: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #6f767e;
          width: 10px;
          height: 10px;
          max-width: 10px;
          max-height: 10px;
          border-radius: 50%;

          &.active {
            background-color: $success-dark;
          }

          &.item-icon-badge {
            width: 18px;
            height: 18px;
            min-width: 18px;
            min-height: 18px;
            padding: 10px;
            background-color: #5669ff;
          }
        }

        .online-status-badge {
          width: 12px;
          height: 12px;
          border: 1px solid #fff;
        }
      }

      /* dropdown item avater end */

      /* dropdown item content start */

      .item-content {
        h6 {
          font-size: 14px;
          line-height: 18px;
          color: $ot-text-primary;
          font-weight: 600;
          span {
            color: $ot-text-primary;
          }

          &.message {
            display: flex;
            flex-direction: column;
            gap: 10px;
            font-weight: 700;
            line-height: 15px;

            span {
              font-size: 12px;
              font-weight: 400;
            }
          }
        }
      }

      .item-status {
        color: $ot-text-primary;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 5px;

        .status-dot {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          min-width: 6px;
          min-height: 6px;
          background-color: #6f767e;

          &.active {
            background: #5669ff;
          }
        }
      }

      /* dropdown item content end */
    }
  }

  .topbar-dropdown-footer {
    background: linear-gradient(90deg, #0f6aff 0%, #21c6fb 100%);
    padding: 12px;
    border-radius: 5px;
    margin-top: 20px;
    text-align: center;

    a {
      color: #fff;
    }

    &:hover {
      background: linear-gradient(90deg,#21c6fb 0%, #0f6aff  100%);
    }
  }
}