// =============================================================================
//  Arrows
// =============================================================================
.u-arrow:before {
  content: '';
  background: transparent;
  display: block;
  position: absolute;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  height: 0.5rem;
  width: 0.75rem;
}

.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 .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 {
  background-color: $color-grey-1;

  @media (forced-colors: active) {
    background-color: ButtonText;
  }
}

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

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