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

.js .dropbutton-widget {
  background-color: transparent;
  border-bottom: solid 1px var(--maincolor);
  width: 160px;
}
.js .dropbutton-widget:hover {
  border-color: var(--actioncolor);
}
.dropbutton .dropbutton-action > * {
  padding: 5px 0px;
  box-sizing: border-box;
  white-space: nowrap;
}
.dropbutton .secondary-action {
  position: absolute;
  left: 0px;
  top: 0px;
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  transform: translateY(100%);
}
.dropbutton-multiple .dropbutton {
}
.dropbutton-multiple .dropbutton .dropbutton-action > * {
  margin-right: 0.25em; /* LTR */
}

.dropbutton .dropbutton-action a,
.dropbutton .dropbutton-action a:visited {
  color: var(--schwarz);
}

.dropbutton .dropbutton-action a:hover,
.dropbutton .dropbutton-action a:active {
  color: var(--actioncolor);
}

.js .dropbutton-multiple .dropbutton-widget {
  padding: 5px 20px 5px 0px;
  box-sizing: border-box;
}

.dropbutton-toggle {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 80;
  
  background-image: url("../../images/select-arrow.svg");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 10px 10px;
}

.dropbutton-toggle:hover {
  cursor: pointer;
}

.dropbutton-toggle > button {
  display: none !important;
}