@import "../../../../styles/index.scss";

.dropdown-menu {
  background: $whiteColor; // #ffffff
  border-radius: $borderRadius;
  // box-shadow: 0px 4px 12px $boxShadowLight; // rgba(0, 0, 0, 0.1)
  display: flex;
  flex-direction: column;
  max-height: 250px;
  min-width: 180px;
  overflow: auto;
  padding: 8px;
  position: relative;

  .mention-item {
    align-items: center;
    background-color: transparent;
    border: none;
    border-radius: 4px;
    color: $darkColor; // #333333 → closest dark token
    cursor: pointer;
    display: flex;
    font-size: 14px;
    gap: 12px;
    padding: 8px 12px;
    text-align: left;
    transition: all 0.2s ease;
    width: 100%;

    .mention-avatar {
      align-items: center;
      display: flex;
      justify-content: center;
    }

    .mention-info {
      display: flex;
      flex-direction: column;
      flex: 1;
      gap: 2px;
    }

    .mention-name {
      font-weight: 400;
      line-height: 1.2;
    }

    .mention-status {
      font-size: 11px;
      font-weight: 400;
      line-height: 1;
      opacity: 0.7;
      text-transform: capitalize;

      &.online {
        color: #22c55e; // Green for online
      }

      &.offline {
        color: $lightGrayColor; // Gray for offline
      }
    }

    &:hover,
    &:hover.is-selected {
      background-color: $offWhiteColor; // #f5f5f5
    }

    &.is-selected {
      background-color: $menuBorderColor; // #f0f0f0
      font-weight: 500;
    }

    &:focus {
      outline: none;
      box-shadow: 0 0 0 2px rgba($primaryColor, 0.2); // rgba(66,153,225,0.2)
    }
  }

  .item {
    color: $lightGrayColor; // #666666
    font-size: 14px;
    padding: 8px 12px;
    text-align: center;
  }

  .mention-loading {
    align-items: center;
    color: $lightGrayColor; // #666666
    display: flex;
    font-size: 14px;
    gap: 8px;
    padding: 12px;
    text-align: center;

    .loading-spinner {
      animation: spin 1s linear infinite;
      border: 2px solid $offWhiteColor; // #f5f5f5
      border-radius: 50%;
      border-top: 2px solid $primaryColor; // #4299e1
      height: 16px;
      width: 16px;
    }
  }

  .mention-error {
    color: #ef4444; // Red for errors
    font-size: 14px;
    padding: 12px;
    text-align: center;
  }

  .mention-no-result {
    color: $lightGrayColor; // #666666
    font-size: 14px;
    padding: 12px;
    text-align: center;
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: $offWhiteColor; // #f5f5f5
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background: $darkGrayColor; // #cccccc
    border-radius: 3px;

    &:hover {
      background: $lightGrayFontColor; // #bbbbbb → closest gray in palette
    }
  }
}
