wagtail/client/scss/overrides/_utilities.dropdowns.scss

// =============================================================================
//  Arrows
// =============================================================================
.u-arrow:before {
  content: '';
  border: solid 0.35rem transparent;
  display: block;
  position: absolute;
}

.u-arrow--tl:before {
  bottom: 100%;
  inset-inline-start: 1rem;
}

.dropup .u-arrow--tl:before {
  top: 100%;
  transform: rotateZ(180deg);
}

// =============================================================================
//  Default dropdown theme
// =============================================================================

// .t-default {

// }
.t-default .u-btn-current {
  border-color: $color-grey-4;
  color: $color-teal;
}

.t-default .u-btn-current:hover {
  background: $color-teal;
  color: $color-white;
  border-color: $color-teal;
}

.t-inverted .u-btn-current {
  background-color: $color-teal-darker;
  border-color: theme('colors.black-35');
  color: $color-white;
}

.t-inverted .u-btn-current:hover {
  background-color: $color-teal-dark;
  border-color: theme('colors.black-35');
}

// =============================================================================
// Dark theme
// =============================================================================
.t-dark .u-link {
  color: $color-white;
}

.t-dark .u-link:hover {
  color: $color-white;
}

.t-dark .u-background {
  background: $color-grey-1;
}

.t-dark .u-arrow:before {
  border-bottom-color: $color-grey-1;
}

// =============================================================================
// States
// =============================================================================
.u-toggle {
  display: none;
}

.is-open .u-toggle {
  display: block;
}