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: rgba(0, 0, 0, 0.15);
  color: $color-teal;
}

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

.t-default .u-btn-current:active {
  background: #333;
  color: #fff;
  border-color: #333;
}

.t-inverted .u-btn-current {
  border-color: rgba(0, 0, 0, 0.35);
  color: #fff;
}

.t-inverted .u-btn-current:hover {
  background-color: $color-teal-darker;
  border-color: rgba(0, 0, 0, 0.35);
}

.t-inverted .u-btn-current:active {
  border-color: rgba(0, 0, 0, 0.35);
  background: #333;
  color: #fff;
}

// =============================================================================
// Dark theme
// =============================================================================
.t-dark .u-link {
  color: #fff;
}

.t-dark .u-link:hover {
  color: #aaa;
}

.t-dark .u-background {
  background: #333;
}

.t-dark .u-arrow:before {
  border-bottom-color: #333;
}

// =============================================================================
// Light theme
// =============================================================================
.t-light .u-link {
  color: #333;
}

.t-light .u-link:hover {
  color: #aaa;
}

.t-light .u-background {
  background: #fff;
  border-color: #ccc;
}

.t-light .u-arrow:before {
  border-bottom-color: #fff;
}

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

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