.dropbutton-wrapper {
  font-size:0.9em;
}

.js .dropbutton-multiple .dropbutton-widget {
  padding-right:1.6em;
}

.js .dropbutton-widget:hover .dropbutton-action,
.js .dropbutton-widget:hover .dropbutton-toggle {
  border-color: #b8b8b8;
}


.dropbutton .dropbutton-action {
  background-color:var(--color-white);
  border:1px solid grey;
  border-radius:1em;
  height:1.6em;
}

.dropbutton .dropbutton-action > * {
  padding: 0.06em var(--gutter-1);
}

.dropbutton-wrapper.dropbutton-multiple .dropbutton-action {
  border-radius:0px;
  border-top-width:0px;
}

.dropbutton-wrapper.dropbutton-multiple .dropbutton-action:first-child {
  border-radius:1em 0px 0px 1em;
  border-right-width:0px;
  border-top-width: 1px;
}

.dropbutton-toggle {
  background-color:var(--color-white);
  border-radius:0px 1em 1em 0px;
  border:1px solid grey;
  border-left-width:0px;
  width: 1.6em;
  height:1.6em;
  
  white-space: nowrap;
  text-indent: 110%;
}


.dropbutton-wrapper.dropbutton-multiple.open .dropbutton-action:first-child {
  border-bottom-left-radius:0px;
}

.dropbutton-wrapper.dropbutton-multiple.open .dropbutton-action:not(:last-child) {
  border-bottom-color:lightgrey;
}

.dropbutton-wrapper.dropbutton-multiple.open .dropbutton-action:last-child {
  border-radius:0px 0px 1em 1em;
}


/**
 * @file
 * General styles for dropbuttons.
 


.js .dropbutton-widget {
  border: 1px solid #ccc;
  background-color: white;
}


.dropbutton .secondary-action {
  border-top: 1px solid #e8e8e8;
}
.dropbutton-multiple .dropbutton {
  border-right: 1px solid #e8e8e8; 
}

.dropbutton-multiple .dropbutton .dropbutton-action > * {
  margin-right: 0.25em; 
}



.js .dropbutton-wrapper .dropbutton .dropbutton-action > .ajax-progress-throbber {
  position: absolute;
  z-index: 2;
  top: -1px;
  right: -5px; /* LTR 
}



/**
 * @file
 * Base styles for dropbuttons.
 */

/**
 * When a dropbutton has only one option, it is simply a button.

.dropbutton-wrapper,
.dropbutton-wrapper div {
  box-sizing: border-box;
}
.js .dropbutton-wrapper,
.js .dropbutton-widget {
  position: relative;
  display: block;
}

@media screen and (max-width: 600px) {
  .js .dropbutton-wrapper {
    width: 100%;
  }
}

/* Splitbuttons
@media screen and (min-width: 600px) {
  .form-actions .dropbutton-wrapper {
    float: left; /* LTR
  }

}
.js .form-actions .dropbutton-widget {
  position: static;
}
.js td .dropbutton-widget {
  position: absolute;
}
.js td .dropbutton-wrapper {
  min-height: 2em;
}
.js td .dropbutton-multiple {
  max-width: 100%;
  margin-right: 2em; /* LTR 
  padding-right: 10em; /* LTR 
}

.js td .dropbutton-multiple .dropbutton-action a,
.js td .dropbutton-multiple .dropbutton-action input,
.js td .dropbutton-multiple .dropbutton-action button {
  width: auto;
}

/* UL styles are over-scoped in core, so this selector needs weight parity. 
.js .dropbutton-widget .dropbutton {
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style-type: none;
  list-style-image: none;
}
.js .dropbutton li,
.js .dropbutton a {
  display: block;
  outline: none;
}

.js .dropbutton li:hover,
.js .dropbutton li:focus,
.js .dropbutton a:hover,
.js .dropbutton a:focus {
  outline: initial;
}

/**
 * The dropbutton styling.
 *
 * A dropbutton is a widget that displays a list of action links as a button
 * with a primary action. Secondary actions are hidden behind a click on a
 * twisty arrow.
 *
 * The arrow is created using border on a zero-width, zero-height span.
 * The arrow inherits the link color, but can be overridden with border colors.

.js .dropbutton-multiple .dropbutton-widget {
  padding-right: 2em; /* LTR 
}

.dropbutton-multiple.open,
.dropbutton-multiple.open .dropbutton-widget {
  max-width: none;
}
.dropbutton-multiple.open {
  z-index: 100;
}
.dropbutton-multiple .dropbutton .secondary-action {
  display: none;
}
.dropbutton-multiple.open .dropbutton .secondary-action {
  display: block;
}

.dropbutton-arrow {
  position: absolute;
  top: 50%;
  right: 40%; /* 0.6667em; */ /* LTR 
  display: block;
  overflow: hidden;
  width: 0;
  height: 0;
  margin-top: -0.1666em;
  border-width: 0.3333em 0.3333em 0;
  border-style: solid;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  line-height: 0;
}

.dropbutton-multiple.open .dropbutton-arrow {
  top: 0.6667em;
  border-top-color: transparent;
  border-bottom: 0.3333em solid;
} */