.dry-dropdown-item {
  &__dropdown {
    position: relative;
  }
  &__content {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 0 0;
    cursor: pointer;
  }
  &__content-wrapper {
    display: flex;
    padding: 8px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 6px;
    background: var(--gray-900, #101828);
    flex-direction: column;

    &__note {
      display: none;
      position: absolute;
      height: 50px;
      width: 200px;
      transform: translateX(70%);
      background-color: #333;
      color: white;
      padding: 5px;
      border-radius: 3px;
      z-index: 1000;
    }
    &:hover &__note {
      display: block;
    }
  }
  &__label {
    color: var(--base-white, #fff);

    /* Text md/Semibold */
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }

  &__notification-amount-wrapper {
    display: flex;
    padding: 8px 12px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 6px;
    background: var(--gray-900, #101828);
  }
  &__notification-amount {
    display: flex;
    padding: 8px 12px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 6px;
    background: var(--gray-900, #101828);
  }
  &__sub-list-icon-wrapper {
    display: flex;
    padding: 8px 12px 8px 43px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 6px;
  }

  &__sub-list {
    :hover {
      background-color: rgb(255, 138, 48);
    }
  }
  &__sub-list {
    &__note {
      display: none;
      position: absolute;
      height: 50px;
      width: 200px;
      transform: translateX(60%);
      background-color: #333;
      color: white;
      padding: 5px;
      border-radius: 3px;
      z-index: 1000;
      &:hover {
        background-color: #333;
      }
    }
    &:hover &__note {
      display: block;
    }
  }
  &__sub-list,
  &__sub-list--active {
    display: flex;
    padding-bottom: 0px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
    cursor: pointer;
    background: var(--gray-900, #101828);
  }
  &__sub-list--active {
    background: var(--gray-700, #344054);
  }
}