.dropdown-menu {
  @include screen-shadow();
  border: 0px;
  width: 320px;
  left: -100px;
  padding: 15px 0;
  z-index: 2;

  .d-flex {
    display: flex;
    .menu-icon {
      margin-right: 15px;
    }
    .menu-title {
      font-size: 14px;
      line-height: 20px;
      font-weight: 600;
      color: $gray-darkish;
    }
    .menu-text {
      font-size: 12px;
      line-height: 20px;
      color: $gray-darkish;
    }
  }
}
.product-dropdown, .developer-dropdown {
  padding-top: 0;
  padding-bottom: 0;
  width: 614px;

  .d-flex {
    flex-wrap: wrap;
    justify-content: space-between;

    .left-side {
      padding-top: 15px;
      width: 320px;
      border-right: 1px solid $gray-lighter;
    }
    .right-side {
      width: calc(100% - 320px);
    }
  }

  .dropdown-item {
    width: 100%;
    .d-flex {
      flex-wrap: nowrap;
    }
  }

  .right-side-item{
    width: 100%;
    .d-flex {
      justify-content: space-between;
      .menu-title {
        color: $pink;
      }
      .menu-icon {
        margin-right: 15px;
      }
    }

    & + .right-side-item {
      border-top: 1px solid $gray-lighter;
    }
  }
}

.product-dropdown {
  .dropmenu-triangle {
    left: 135px;
  }

  .dropdown-item {
    padding: 14px 24px;
  }

  .right-side-item{
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

.developer-dropdown {
  left: -190px;

  .dropmenu-triangle {
    left: 240px;
  }

  .right-side-item{
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

.dropmenu-triangle {
  position: absolute;
  top: -8px;
  width: 20px;
  height: 20px;
  transform: rotate(45deg);
  background: white;
  z-index: 1;
}

.dropdown-item {
  padding: 24px 24px;
  white-space: unset;
  &:hover {
    .menu-title {
      color: $black;
    }
  }
}

.dropdown-toggle {
  &:after {
    border: none;
    vertical-align: middle;
    line-height: 0;
    content: '\F123';
    display: inline-block;
    font-family: Ionicons;
    margin: 0.5rem;
    font-size: 10px;
  }
}

@include media-breakpoint-down(md) {
  .dropdown-menu {
    width: 100%;
    padding: 8px 0;
    left: 0;

    .d-flex {
      .menu-icon {
        display: none;
      }
      .menu-text {
        display: none;
      }
    }
  }
  .product-dropdown, .developer-dropdown {
    .d-flex {
      .left-side {
        padding-top: 0;
        width: 100%;
        border: 0px;
      }
      .right-side {
        width: 100%;
        .monitoring {
          border: 0;
        }
      }
    }
    .dropdown-item {
      width: 100%;
      padding-top: 5px;
      padding-bottom: 5px;
      .d-flex {
        .menu-title {
          color: $gray-darkish;
        }
      }
    }
  }
  .dropmenu-triangle {
    display: none;
  }
  .dropdown-item {
    padding: 3px 24px;
  }
}
