.gl-new-dropdown {
  @include gl-display-inline-flex;
  @include gl-vertical-align-middle;

  .gl-new-dropdown-custom-toggle {
    *:first-child {
      @include gl-cursor-pointer;

      &:focus {
        @include gl-focus;
      }
    }
  }

  .gl-new-dropdown-panel {
    @include gl-display-none;
    @include gl-bg-white;
    @include gl-border-1;
    @include gl-border-solid;
    @include gl-border-gray-200;
    @include gl-rounded-lg;
    @include gl-shadow-md;
    top: 0;
    left: 0;
    min-width: $gl-new-dropdown-min-width;
    max-width: $gl-new-dropdown-max-width;
    z-index: 1000;
  }

  .gl-new-dropdown-inner {
    @include gl-display-flex;
    @include gl-flex-direction-column;
    max-height: $gl-max-dropdown-max-height;
  }

  .gl-new-dropdown-contents {
    position: relative;
    @include gl-flex-grow-1;
    @include gl-overflow-y-auto;
    @include gl-pl-0;
    @include gl-mb-0;
    @include gl-py-2;
    @include gl-list-style-none;

    &:focus-visible {
      @include gl-focus;
    }

    ul {
      @include gl-list-style-none;
    }
  }

  .gl-new-dropdown-toggle {
    // optically align the caret
    &.gl-button:not(.gl-new-dropdown-toggle-no-caret) {
      @include gl-pr-3;

      &.btn-sm {
        @include gl-pr-2;
      }
    }

    &.gl-new-dropdown-toggle-no-caret .gl-new-dropdown-chevron {
      @include gl-display-none;
    }
  }

  .gl-new-dropdown-toggle {
    .gl-button-text {
      @include gl-display-inline-flex;
    }
  }

  .gl-new-dropdown-button-text {
    @include gl-mr-auto;
    @include gl-overflow-hidden;
    @include gl-text-overflow-ellipsis;
  }

  &.btn-sm .gl-icon {
    @include gl-my-0;

    &.gl-new-dropdown-chevron {
      @include gl-h-5;
      @include gl-w-5;
    }
  }

  .gl-button .gl-button-icon.gl-new-dropdown-chevron {
    @include gl-ml-2;
    @include gl-mr-0;
  }

  .gl-new-dropdown-icon-only {
    // optically align the caret
    &.gl-button:not(.gl-new-dropdown-toggle-no-caret) {
      @include gl-pr-2;

      &.btn-sm {
        @include gl-pr-0;
      }
    }

    .gl-button-icon.gl-button-icon {
      @include gl-mr-0;
    }

    &.btn-sm .gl-new-dropdown-chevron {
      @include gl-mx-0;
    }
  }

  .gl-new-dropdown-caret-only {
    // optically center the caret
    @include gl-pl-2;

    &.btn-sm {
      @include gl-pl-0;
    }
  }

  $dropdown-content-padding: 0.25rem;

  // Scrim overlay related styles (the shadow that appears above and below the content) indicating that the content is scrollable
  .gl-new-dropdown-contents-with-scrim-overlay {
    padding: 0;
  }

  .gl-new-dropdown-contents {
    .top-scrim-wrapper,
    .bottom-scrim-wrapper {
      height: $dropdown-content-padding;
      opacity: 0;
      position: sticky;
      z-index: 1;
      display: block;
      overflow: visible;
      left: 1px;
      right: 1px;
      pointer-events: none;
      transition: opacity 0.1s;
    }

    .top-scrim-wrapper {
      top: 0;

      .top-scrim {
        left: 0;
        right: 0;

        &.top-scrim-light {
          height: 2.25rem;
          border-radius: 0.375rem 0.375rem 0 0;
          background: linear-gradient(180deg, $white 0%, $transparent-rgba);
        }

        &.top-scrim-dark {
          height: 0.25rem;
          background: linear-gradient(180deg, $t-gray-a-16 0%, $transparent-rgba 100%);
        }
      }
    }

    .bottom-scrim-wrapper {
      bottom: 0;
      height: $dropdown-content-padding;

      .bottom-scrim {
        height: 0;
        position: relative;
        top: calc(-2.25rem + #{$dropdown-content-padding});
        border-radius: 0 0 0.375rem 0.375rem;
        background: linear-gradient(180deg, $transparent-rgba 0%, $white);
      }
    }

    &.top-scrim-visible .top-scrim-wrapper,
    &.bottom-scrim-visible .bottom-scrim-wrapper {
      opacity: 1;
    }

    &.bottom-scrim-visible .bottom-scrim {
      height: 2.25rem;
    }
  }
}

.btn-group {
  .gl-new-dropdown:not(:last-child) {
    .gl-new-dropdown-toggle {
      @include gl-rounded-top-right-none;
      @include gl-rounded-bottom-right-none;
    }
  }

  .gl-new-dropdown:not(:first-child) {
    .gl-new-dropdown-toggle {
      @include gl-rounded-top-left-none;
      @include gl-rounded-bottom-left-none;

      // Prevent double borders when buttons are next to each other
      margin-left: -1px;
    }
  }

  // The dropdown toggle of a "split" is by design supposed to be the last
  // child of a button group, so only apply styles for that.
  .gl-new-dropdown:last-child {
    .gl-new-dropdown-caret-only {
      &.btn-confirm,
      &.btn-danger {
        margin-left: 1px;
      }

      &:disabled,
      &.disabled,
      &[class*='-secondary'] {
        margin-left: -1px;
      }
    }
  }

  .gl-new-dropdown:hover {
    .gl-new-dropdown-toggle {
      @include gl-z-index-1;
    }
  }

  .gl-new-dropdown {
    .gl-new-dropdown-toggle:focus,
    .gl-new-dropdown-toggle:active {
      @include gl-z-index-1;
    }
  }
}