/**
 * Ugly CSS overrides for the Drupal internal Dropbutton component.
 * This component should not be used for end-users!
 */

.dropbutton-wrapper {
  --height: 3.25rem;

  height: var(--height);
}

.dropbutton {
  position: absolute;
  text-align: center;
  width: 16em !important;
}

.dropbutton-action {
  background: var(--c-a);
  color: var(--c-typo-on-a);
  margin-inline-start: var(--height);
  padding-block: var(--input-button-padding-y) !important;
  padding-inline: 1.5rem !important;
}

.dropbutton-action:not(.secondary-action) {
  border-end-end-radius: var(--border-radius);
  border-start-end-radius: var(--border-radius);
}

.open .dropbutton-action:not(.secondary-action) {
  border-end-end-radius: 0;
  border-start-end-radius: var(--border-radius);
}

.dropbutton-action.secondary-action {
  font-size: 0.875em;
  margin-top: 0.0625rem;
}

.dropbutton-action.secondary-action:last-child {
  border-end-end-radius: var(--border-radius);
}

.dropbutton-toggle {
  background: var(--c-a);
  border-end-start-radius: var(--border-radius);
  border-inline-end: 0.0625em solid;
  border-start-start-radius: var(--border-radius);
  bottom: auto;
  color: var(--c-typo-on-a);
  height: var(--height);
  inset-inline-start: 0 !important;
  position: absolute;
  width: var(--height);
}

.dropbutton-arrow {
  inset-inline-start: 50%;
}

.dropbutton-multiple .dropbutton-arrow {
  --x: -50%;

  top: calc(var(--height) / 2) !important;
  transform: translateX(var(--x));
}

.dropbutton-multiple.open .dropbutton-arrow {
  transform: translateX(var(--x)) translateY(-50%);
}

[dir="rtl"] .dropbutton-multiple .dropbutton-arrow {
  --x: 50%;
}