/* General */

.dropdown-menu__content {
  display: none;
  position: absolute;
  background-color: var(--color-white);
  border-radius: 5px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  padding: 10px;
  p{
    font-size: 15px;
    line-height: 25px;
    color: var(--color-dark);
  }
}

.dropdown-menu__content a {
  text-decoration: none;
  display: block;
}

.dropdown-menu__content a:hover {
  text-decoration: none;
  font-weight: bold;
}


/* dropdown header (user icon) */


.dropdown-menu--header{
  float: left;
  z-index: 1;
  margin-left: 20px;
  .dropdown-menu__icon img{
    width: 36px;
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%);
  }
  .dropdown-menu__content{
    right: 78px;
    min-width: 138px;
    padding: 0;
  }
  .dropdown-menu__content a {
    padding: 12px 16px;
    color: var(--color-black) !important;
  }
  .dropdown-menu__content a:hover {
    background-color: #fafafa !important;
  }
}

.dropdown-menu--header:hover .dropdown-menu__content {
  display: block;
}

.navbar-freemium, .navbar-premium, .navbar-business{
  .dropdown-menu__content{
    top: 59px;
  }
}

.navbar-default{
  .dropdown-menu__content{
    top: 48px;
  }
}

/* dropdown on bot menu & action bar */

.dropdown-menu--botheader, .dropdown-menu--action-bar {
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 10px;
  .dropdown-menu__icon img{
    width: 20px;
  }
}

.dropdown-menu--action-bar {
  background-image: url("/assets/ellipsis-h-regular-6ced9785.svg");
  background-repeat: no-repeat;
  width: 30px;
  border: none;
  height: 20px;
  background-color: unset;
  button{
    display: flex;
  }
}
.dropdown-menu__content{
  z-index: 1;
}

.dropdown-menu--botheader{
  .dropdown-menu__content{
    width: 138px;
  }
}
.dropdown-menu--botheader:hover .dropdown-menu__content, .dropdown-menu--action-bar:hover .dropdown-menu__content {
  display: block;
}

/* dropdown on bot menu mobile */

.dropdown-menu--botheader-mobile{
  position: relative;
  .dropdown-menu__content{
    width: 237px;
    right: 10px;
    top: -10px;
    height: fit-content;
    .nav>li>a{
      padding: 0;
    }
  }
  .dropdown-menu__icon{
    float: right;
    margin-right: 20px;
    img{
      filter: invert(74%) sepia(11%) saturate(10%) hue-rotate(356deg) brightness(89%) contrast(90%);
    }
  }
}
.dropdown-menu--botheader-mobile:hover .dropdown-menu__content {
  display: block;
}



/* dropdown description & settings on bot hover */

.bot__content:hover{
  .dropdown-menu--bot-settings, .dropdown-menu--bot-description{
    display: block;
  }
}

.dropdown-menu--bot-description:hover .dropdown-menu__content {
    display: block;
  }
.dropdown-menu--bot-settings:hover .dropdown-menu__content {
    display: block;
  }

.bot__content {
  .dropdown-menu--bot-settings{
    display: none;
    position: absolute;
    .dropdown-menu__icon img{
      width: 16px;
    }
    .dropdown-menu__content{
      width: 125px;
      a{
        line-height: 25px;
        color: var(--color-dark);
      }
      a.delete-link{
        color: var(--color-red);
      }
      a.delete-link:hover{
        color: var(--color-red);
        font-weight: bold;
      }
    }
  }
  .dropdown-menu--bot-description{
    display: none;
    position: absolute;
    .dropdown-menu__icon img{
      width: 16px;
    }
    .dropdown-menu__content{
      width: 250px;
      a{
        padding: 10px;
      }
    }
  }
}

.page--bots{
  .bot__content {
    width: 228px;
  }
  .dropdown-menu--bot-description{
    top: 10px;
    right: 169px;
  }
  .dropdown-menu--bot-settings{
    top: 7px;
    right: 54px;
  }
}

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {


  .bot__content .dropdown-menu--bot-settings {
    top: 40px;
    right: 295px;
  }
  .dropdown-menu--botheader-mobile .dropdown-menu__content {
    top: 143px;
  }
}

@media only screen
and (min-device-width : 708px)
and (max-device-width : 1024px)
and (orientation : landscape) {

  .bot__content .dropdown-menu--bot-settings {
    right: 90px;
  }
  .dropdown-menu--botheader-mobile .dropdown-menu__content {
    top: 150px;
  }
}


 @media only screen
and (min-device-width : 1024px)
and (max-device-width : 1366px)
and (orientation : portrait) {

  .bot__content .dropdown-menu--bot-settings {
    right: 83px;
    top: 20px;
  }
}

@media only screen
and (min-device-width : 1024px)
and (max-device-width : 1366px)
and (orientation : landscape) {

}


@media (max-width: 992px) {
  .bot__content:hover {
    .dropdown-menu--bot-settings {
      display: none;
    }
  }
}

@media (max-width: 767px) {

  .dropdown-menu--action-bar .dropdown-menu__content img{
    margin-right: 10px !important;
    width: 19px;
  }

  .bot__content:hover {
    .dropdown-menu--bot-settings {
      display: none;
    }
  }
  .mybot-container__content{
    margin-top: 20px;
  }
}