// The dropdown wrapper (`<div>`)
.dropup,
.dropright,
.dropdown,
.dropleft {
  position: relative;
}

.dropdown-toggle {
  white-space: nowrap;

  // Generate the caret automatically
  @include caret();
}

// The dropdown menu
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: auto;
  max-width: 280px;
  overflow-y: auto;
  z-index: $zindex-fixed + 200;
  display: none; // none by default, but block on "open" of the menu
  float: left;
  min-width: $dropdown-min-width;
  padding: $dropdown-padding-y $dropdown-padding-x;
  margin: $dropdown-spacer 0 0; // override default ul
  @include font-size($dropdown-font-size);
  color: $dropdown-color;
  text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
  list-style: none;
  background-color: $dropdown-bg;
  background-clip: padding-box;
  @include border-radius($dropdown-border-radius);
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;

  .rui-course-card & {
    max-width: 195px;
  }

  .border-top, .border-bottom {
    border-color: $dropdown-border-color!important;
  }

  .block-controls & {
    padding: 5px;
    margin: 2px;
  }

  .theme-dark & {
    color: $dm-dropdown-color;
    background-color: $dm-dropdown-bg;
    border: 1px solid $dm-border-color;
  }

  li {
    margin-bottom: .35rem;

    &:last-of-type {
      margin-bottom: 0;
    }
  }
}

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .dropdown-menu#{$infix}-left {
      right: auto;
      left: 0;
    }

    .dropdown-menu#{$infix}-right {
      right: 0;
      left: auto;
    }
  }
}

// Allow for dropdowns to go bottom up (aka, dropup-menu)
// Just add .dropup after the standard .dropdown class and you're set.
.dropup {
  .dropdown-menu {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: $dropdown-spacer;
  }

  .dropdown-toggle {
    @include caret(up);
  }
}

.dropright {
  .dropdown-menu {
    top: 0;
    right: auto;
    left: 100%;
    margin-top: 0;
    margin-left: $dropdown-spacer;
  }

  .dropdown-toggle {
    @include caret(right);

    &::after {
      vertical-align: 0;
    }
  }
}

.dropleft {
  .dropdown-menu {
    top: 0;
    right: 100%;
    left: auto;
    margin-top: 0;
    margin-right: $dropdown-spacer;
  }

  .dropdown-toggle {
    @include caret(left);

    &::before {
      vertical-align: 0;
    }
  }
}

// When enabled Popper.js, reset basic dropdown position
// stylelint-disable-next-line no-duplicate-selectors
.dropdown-menu {
  &[x-placement^="top"],
  &[x-placement^="right"],
  &[x-placement^="bottom"],
  &[x-placement^="left"] {
    right: auto;
    bottom: auto;
  }
}

// Dividers (basically an `<hr>`) within the dropdown
.dropdown-divider {
  @include nav-divider($dropdown-divider-bg, $dropdown-divider-margin-y, true);

  .theme-dark & {
    @include nav-divider($dm-dropdown-divider-bg, $dropdown-divider-margin-y, true);
  }

  &+.dropdown-divider {
    display: none;
  }
}

// Links, buttons, and more within the dropdown menu
//
// `<button>`-specific styles are denoted with `// For <button>s`
input.dropdown-item {
  background-color: transparent;
}

.dropdown-menu a,
.dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 290px;

  padding: $dropdown-item-padding-y $dropdown-item-padding-x;
  margin-bottom: 2px;
  clear: both;

  font-size: $font-size-xs;
  font-weight: $font-weight-medium;
  color: $dropdown-color;

  text-align: inherit; // For `<button>`s
  text-decoration: if($link-decoration==none, null, none);
  /*word-break: normal;
  white-space: break-spaces;*/

  white-space: normal;

  border: 0; // For `<button>`s
  border-radius: $dropdown-border-radius;

  background-blend-mode:hard-light;

  &:last-child {
    margin-bottom: 0;
  }

  &[disabled=disabled] {
    opacity: .5;
    background-color: $dropdown-link-hover-bg;
  }

  .rui-course-card & {
    min-width: 180px;
  }

  .theme-dark & {
    color: $dm-dropdown-color;
  }

  &.ml-4 {
    width: calc(100% - 1.875rem);
  }

  &:not(.hidden) {
    display: flex;
  }

  .icon {
    margin-right: 7px;
    width: 16px;
    height: 16px;

    color: inherit;
    opacity: .6;
    filter: invert(1);
  }

  .rui-icon {
    line-height: 1;
  }

  // Prevent dropdown overflow if there's no padding
  // See https://github.com/twbs/bootstrap/pull/27703
  @if $dropdown-padding-y==0 {
    &:first-child {
      @include border-top-radius($dropdown-inner-border-radius);
    }

    &:last-child {
      @include border-bottom-radius($dropdown-inner-border-radius);
    }
  }

  &.hidden {
    display: none;
  }

  &.active,
  &:hover {
    color: $dropdown-link-hover-color;
    text-decoration: none;
    background-color: $dropdown-link-hover-bg;

    .theme-dark & {
      color: $dm-dropdown-link-hover-color;
      background-color: $dm-dropdown-link-hover-bg;
    }
    
    .icon {
      filter: invert(1);
    }
  }

  &.active,
  &:active {
    a {
      color: $dropdown-link-active-color;
      text-decoration: none;
      @include gradient-bg($dropdown-link-active-bg);
    }

    .icon {
      filter: invert(1);
    }
  }

  &:after {
    display: none;
  }

  &[aria-current="true"] {
    position: relative;
    display: flex;
    align-items: center;

    color: $dropdown-link-active-color;
    text-decoration: none;
    @include gradient-bg($dropdown-link-active-bg);

    margin-bottom: .15rem;

    .theme-dark & {
      color: $dm-dropdown-link-active-color;
      @include gradient-bg($dm-dropdown-link-active-bg);
    }
  }

  &.disabled,
  &:disabled {
    a {
      opacity: .5;
      color: $dropdown-link-disabled-color;
      pointer-events: none;
      background-color: transparent;

      // Remove CSS gradients if they're enabled
      @if $enable-gradients {
        background-image: none;
      }

      .theme-dark & {
        color: $dm-dropdown-link-disabled-color;
      }
    }
  }

}

//Atto Editor mod
.dropdown-menu .atto_menuentry {
  a {
    display: block;
    width: 100%; // For `<button>`s

    margin-bottom: 0.25rem;
    padding: $dropdown-item-padding-y $dropdown-item-padding-x;
    clear: both;

    font-size: $font-size-md;
    font-weight: $font-weight-medium;
    color: $dropdown-color;

    text-align: inherit; // For `<button>`s
    text-decoration: if($link-decoration==none, null, none);
    white-space: nowrap; // prevent links from randomly breaking onto new lines

    border: 0; // For `<button>`s
    border-radius: $border-radius;

    .theme-dark & {
      color: $dm-dropdown-color;
    }

    &:hover {
      color: $dropdown-link-hover-color;
      text-decoration: none;
      background-color: $dropdown-link-hover-bg;

      .theme-dark & {
        color: $dm-dropdown-link-hover-color;
        background-color: $dm-dropdown-link-hover-bg;
      }
    }
  }

}

.dropdown-menu.show {
  display: block;
  min-height: max-content;
  width: max-content;
  max-width: 300px;
}

.dir-rtl .usermenu {
  .dropdown-menu.show {
    display: block;
    left: 30px!important;
  }  
}

// Dropdown section headers
.dropdown-header {
  display: block;
  padding: .35rem 1rem;
  margin: 0 -5px 5px; // for use with heading elements
  @include font-size($font-size-xs);
  font-weight: $font-weight-medium;
  color: $dropdown-header-color;
  white-space: nowrap; // as with > li > a

  border-bottom: 1px solid $dropdown-border-color;

  .theme-dark & {
    color: $dm-dropdown-header-color;
    border-bottom: 1px solid $dm-dropdown-border-color;
  }
}

// Dropdown text
.dropdown {
  .dropdown-item-text {
    max-width: calc(100% - 30px);
    @extend .text-truncate;
  }

}



// Action menu trigger - settings button
.dropdown-btn {

  @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
  font-weight: $font-weight-medium;
  color: $body-color;

  @include transition($btn-transition);

  .action-menu-trigger &,
  #category-listing & {
    padding: 7px;

    &:after {
      display: none;
    }
  }

  .theme-dark & {
    color: $dm-gray-900;
  }

  .main-nav-container & {
    background-color: transparent;
    color: $body-color-secondary;

    .theme-dark & {
      background-color: transparent;
      color: $dm-body-color-secondary;
    }
  }

  &:hover {
    background-color: $gray-100;
    color: $body-color;
    text-decoration: none;

    .theme-dark & {
      background-color: $dm-gray-300;
      color: $dm-body-color;
    }
  }

  .icon {
    margin: 0;
    width: 24px;
    height: 24px;

    #course-category-listings & {
      display: inline-flex;
      align-items: center;

      width: 16px;
      height: 16px;
    }
  }
}

// The dropdown menu
.dropdown-user {
  width: 300px;
  max-width: 300px;

  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  font-size: 1rem; //16px
  font-weight: $font-weight-medium;
  color: $dropdown-text;

  .theme-dark & {
    color: $dm-dropdown-text;
  }

  .meta.viewingas,
  .meta.role {
    position: relative;
    display: block;
    background-color: $green-200;
    padding: 9px 14px;
    margin: 5px 0 0;

    border-radius: $border-radius;

    font-size: $font-size-xs;
    line-height: 1.3;
    color: $green-800;
    text-align: center;
  }
}

.meta.loginfailures {
  padding: 3px 8px;
  background-color: $yellow-100;
  border-radius: $border-radius;

  font-size: $font-size-xs;
  white-space: normal;
  line-height: 1.3;
  color: $yellow-800;
}

.dropdown-user-meta:not(:empty) {
  margin: 5px 0 0;
  white-space: normal;

  .badge-xs:empty {
    display: none;
  }
}

.dropdown-user-nick {
  margin: 15px 0 5px;
  white-space: normal;
  font-size: $font-size-xs;
  line-height: 1;
  color: rgba($dropdown-text, .8);
}

.dropdown-user-mail {
  display: block;
  width: 100%;

  font-size: 0.75rem;
  font-weight: $font-weight-normal;
  color: rgba($dropdown-text, .8);

  .theme-dark & {
    color: rgba($dm-dropdown-text, .8);
  }
}

.dropdown-user-wrapper {
  padding: 10px 12px;
  display: flex;
  flex-wrap: wrap;
}

.rui-fullname {
  width: 100%;
  font-size: $font-size-sm;
  white-space: normal;
  word-break: break-all;
}

.dropdown-item.aabtn.menu-action {
  .dropdown-item--text {
    display: none;
  }
}

.dropdown-item--text {
  max-width: 200px;
}

// Tool Lp Competencies
.dropdown {
  .tool-lp-menu-item {
    padding: 0;
    
    a {
      font-weight: $font-weight-medium;
      color: $dropdown-text;

      &:hover {
        text-decoration: none;
      }

      .icon {
        padding: 0;
      }
    }
  }
}

.dropdown-menu,
.collapsecolumndropdown {
  .text-muted {
    color: $dm-body-color-light;
  }
}