//
// Dropdown menus
// --------------------------------------------------

.dropdown {
  position: relative;

  &-toggle:not(.dropdown-toggle-no-arrow) {
    $icon-size: $grid-unit-y * 3;

    padding-right: $grid-unit-x * 5;
    position: relative;

    &:after {
      content: "\f078";
      position: absolute;
      right: $grid-unit-x;
      font-size: $font-size-small;
      top: 50%;
      line-height: $icon-size;
      height: $icon-size;
      width: $icon-size;
      text-align: center;
      margin-top: -(ceil($icon-size * 0.5));
      font-family: $font-family-awesome;
      font-weight: $font-family-awesome-weight;

      @include themes(color, color-new-body-light);
      @include transition-property(transform);
      @include transition-duration($component-animation-duration);
      @include transition-timing-function($component-animation-timing);
    }

    // Prevent the focus on the dropdown toggle when closing dropdowns
    &:focus {
      outline: 0;
    }
  }

  &.open {
    // Show the menu
    > .dropdown-menu {
      display: block;
    }

    // Remove the outline when :focus is triggered
    > a {
      outline: 0;
    }

    .dropdown-toggle:not(.dropdown-toggle-no-arrow) {
      &:after {
        @include transform(rotate(180deg));
      }
    }
  }

  &-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: $zindex-dropdown;
    display: none;
    float: left;
    min-width: $grid-unit-x * 20;
    margin: 2px 0 0;
    font-size: $font-size-base;
    text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
    list-style: none;
    background-clip: padding-box;
    border-radius: $dropdown-border-radius;
    border-width: 0;
    max-height: $grid-unit-y * 40;
    overflow-y: auto;
    padding: $dropdown-padding;
    font-family: $font-family-base;

    @include themes(background, dropdown-bg);
    @include box-shadow-themes(box-shadow-new-2);
    @include styled-scroll-vert();

    @include media-breakpoint-down(sm) {
      max-width: 100%;
    }

    &.pull-right {
      right: 0;
      left: auto;
    }

    > li,
    > .dropdown-menu-item,
    > .dropdown-menu-wrapper > aw-option > .dropdown-menu-item {
      > a,
      > div {
        $line-height: $grid-unit-y * 3;

        display: block;
        clear: both;
        white-space: nowrap; // prevent links from randomly breaking onto new lines
        padding: $list-group-item-padding-y $dropdown-padding;
        font-size: $font-size-large;
        line-height: $line-height;
        font-weight: $font-weight-regular;
        cursor: pointer;
        min-height: $line-height + $list-group-item-padding-y * 2;

        @include border-radius($border-radius-new-medium);
        @include themes(color, dropdown-link-color);

        &:hover,
        &:focus {
          text-decoration: none;

          @include themes(color, dropdown-link-hover-color);
          @include themes(background-color, dropdown-link-hover-bg);
        }

        .dropdown-menu-item-icon {
          margin-right: $grid-unit-x * 2;
          vertical-align: -6%;

          @include themes(color, color-new-body-light);
        }

        .avatar {
          height: ceil($grid-unit-y * 2.5);
          width: ceil($grid-unit-y * 2.5);
          line-height: ceil($grid-unit-y * 2.5);
          font-size: $font-size-extra-small;
        }
      }

      &.active {
        > a,
        > div {
          text-decoration: none;
          outline: 0;
          color: $dropdown-link-active-color;

          &:hover,
          &:focus {
            @include themes(background-color, dropdown-link-active-hover-bg);
          }

          .dropdown-menu-item-icon {
            @include themes-value(color, $dropdown-link-active-color);
          }
        }
      }
    }

    .selected,
    > .dropdown-menu-wrapper > aw-option.selected {
      > li,
      > .dropdown-menu-item,
      .dropdown-menu-item > div {
        > a,
        > div,
        > div span {
          background-color: $dropdown-link-active-bg;
          color: $dropdown-link-active-color;

          &:hover,
          &:focus {
            color: $dropdown-link-active-hover-color;

            @include themes(background-color, dropdown-link-active-hover-bg);
          }

          .dropdown-menu-item-icon {
            @include themes-value(color, $dropdown-link-active-color);
          }
        }
      }
    }

    .disabled {
      &,
      &:hover,
      &:focus {
        @include themes(color, dropdown-link-disabled-color);
      }

      // Nuke hover/focus effects
      &:hover,
      &:focus {
        text-decoration: none;
        cursor: $cursor-disabled;
        background-color: transparent;
        background-image: none; // Remove CSS gradient
        @include reset-filter;
      }
    }

    .divider {
      height: 1px;
      overflow: hidden;
      margin: $dropdown-padding 0;

      @include themes(background-color, dropdown-divider-bg);
    }

    &-container {
      padding: $list-group-item-padding-y 0;
      display: block;
    }

    &-right {
      right: 0;
      left: auto; // Reset the default from `.dropdown-menu`
    }

    &-left {
      right: auto;
      left: 0;
    }

    // Date Time Picker

    &-date {
      $padding-y: $grid-unit-y * 3;
      $padding-x: $grid-unit-y * 3;

      padding: 0;
      min-width: 314px;
      margin-bottom: $grid-unit-y * 2;
      max-height: none;

      &-picker {
        position: relative;

        &-container {
          outline: 0;
        }

        &-close {
          position: absolute;
          top: $padding-y + 1;
          right: $padding-x;
          line-height: $grid-unit-y * 3;
          font-size: $font-size-base;
          font-weight: $font-weight-medium;

          @include themes(color, color-new-body-light);

          &:hover,
          &:focus {
            color: $brand-primary;
          }

          .far {
            vertical-align: -4%;
          }
        }

        &-header {
          padding: $padding-y $padding-x;

          &-title {
            font-size: $font-size-h4;
            line-height: $grid-unit-y * 3;
            font-weight: $font-weight-medium;

            @include themes(color, color-new-heading);

            span {
              font-weight: $font-weight-regular;
            }
          }

          a.dropdown-menu-date-picker-header-title {
            &:hover,
            &:focus {
              color: $brand-primary;
            }
          }
        }

        &-body {
          padding: $grid-unit-y * 2 $padding-x;

          @include themes(color, color-new-body-dark);
          @include themes(background-color, dropdown-data-body-bg);

          table {
            margin-bottom: -$grid-unit-y * 2;
            width: 100%;

            > thead {
              > tr {
                > th {
                  font-size: $font-size-base;
                  line-height: $grid-unit-y * 2;
                  padding-bottom: $grid-unit-y * 2;
                  font-weight: $font-weight-regular;

                  @include themes(color, dropdown-table-header-color);

                  &:first-child {
                    padding-left: 0;
                  }

                  &:last-child {
                    padding-right: 0;
                  }
                }
              }
            }

            > tbody {
              > tr {
                > td {
                  padding-bottom: $grid-unit-y * 2;

                  a {
                    font-size: $font-size-base;
                    line-height: $grid-unit-y * 3;
                    height: $grid-unit-y * 3;
                    width: 100%;

                    @include themes(color, color-new-body-dark);

                    &:hover,
                    &:focus {
                      & {
                        color: $brand-primary;
                      }
                    }

                    &.disabled {
                      pointer-events: none;
                    }

                    &.dropdown-menu-date-picker-selected {
                      display: inline-block;
                      margin-top: -(ceil($grid-unit-y * 0.5));
                      margin-bottom: -(ceil($grid-unit-y * 0.5));
                    }

                    &.dropdown-menu-date-picker-today {
                      color: $color-white;
                      background-color: $brand-primary;
                      border-radius: ceil($grid-unit-y * 1.5);
                      display: inline-block;
                      font-weight: $font-weight-medium;

                      &:hover,
                      &:focus {
                        background-color: $brand-primary-dark-1;
                      }
                    }
                  }
                }
              }
            }
          }

          &-fixed-width {
            table {
              > thead,
              > tbody {
                > tr {
                  > th,
                  > td {
                    width: $grid-unit-y * 5;

                    &:not(:first-child) {
                      padding-left: $grid-unit-y;
                      padding-right: $grid-unit-y;
                    }
                  }
                }
              }

              > tbody {
                > tr {
                  > td {
                    a {
                      width: $grid-unit-x * 3;
                    }
                  }
                }
              }
            }
          }

          &-fixed-width-3 {
            table {
              > thead,
              > tbody {
                > tr {
                  > th,
                  > td {
                    width: 33%;
                  }
                }
              }
            }
          }
        }

        &-footer {
          padding: $padding-y $padding-x;
          font-size: $font-size-base;
          font-weight: $font-weight-medium;
          line-height: $grid-unit-y * 2;
          display: flex;
          justify-content: space-between;

          a {
            &:hover,
            &:focus {
              color: $brand-primary;
            }
          }

          &-time,
          &-date {
            @include themes(color, color-new-heading);

            .far {
              vertical-align: -4%;
            }
          }

          &-clear {
            @include themes(color, color-new-body-light);

            .fas {
              vertical-align: -4%;
            }
          }

          &-underline {
            @include themes(color, color-new-heading);
          }
        }
      }

      // Time Variation

      &-time {
        .dropdown-menu-date-picker {
          &-body {
            padding: $padding-y $padding-x;

            table > tbody {
              > tr {
                > td {
                  line-height: $grid-unit-y * 6;
                  font-size: $font-size-h3;

                  @include themes(color, color-new-body-light);
                }
              }
            }

            .form-control {
              border-radius: $input-border-radius-large;
              text-align: center;
              width: $grid-unit-x * 10;
            }
          }
        }
      }
    }
  }

  &-header {
    display: block;
    padding: 3px 20px;
    font-size: $font-size-small;
    line-height: $line-height-base;
    white-space: nowrap; // as with > li > a

    @include themes(color, dropdown-header-color);
  }

  &-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: ($zindex-dropdown - 10);
  }

  &-highlight {
    &-strong {
      strong {
        color: $brand-primary;
      }
    }
  }
}

// Right aligned dropdowns
.pull-right > .dropdown-menu {
  right: 0;
  left: auto;
}

@media (min-width: $grid-float-breakpoint) {
  .navbar-right {
    .dropdown-menu {
      right: 0;
      left: auto;
    }
    // Necessary for overrides of the default right aligned menu.
    // Will remove come v4 in all likelihood.
    .dropdown-menu-left {
      left: 0;
      right: auto;
    }
  }
}