#bratonien-selection-toggle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

#bratonien-selection-toggle.active {
  color:#f0a646;
}

.bratonien-selection-bar {
  position:sticky;
  top:.5rem;
  z-index:1000;
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  align-items:center;
  width:max-content;
  max-width:100%;
  margin:.35rem .6rem .75rem auto;
  padding:.45rem .55rem;
  border:1px solid rgba(255,255,255,.16);
  border-radius:.4rem;
  background:rgba(27,27,27,.96);
  box-shadow:0 .2rem .7rem rgba(0,0,0,.22);
}

.bratonien-selection-status {
  padding:0 .45rem 0 .2rem;
  white-space:nowrap;
  color:#d7d7d7;
}

.bratonien-selection-actions {
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
}

.bratonien-selection-actions button {
  min-height:2rem;
  padding:.3rem .58rem;
  border:1px solid rgba(255,255,255,.18);
  border-radius:.25rem;
  background:rgba(255,255,255,.045);
  color:inherit;
  cursor:pointer;
  font:inherit;
}

.bratonien-selection-actions button:hover:not(:disabled),
.bratonien-selection-actions button:focus:not(:disabled) {
  border-color:rgba(240,166,70,.72);
  color:#f0a646;
}

.bratonien-selection-actions .bratonien-selection-primary {
  border-color:#f0a646;
  background:#f0a646;
  color:#242424;
  font-weight:700;
}

.bratonien-selection-actions .bratonien-selection-primary:hover:not(:disabled),
.bratonien-selection-actions .bratonien-selection-primary:focus:not(:disabled) {
  color:#242424;
}

.bratonien-selection-actions button:disabled {
  opacity:.42;
  cursor:default;
}

.bratonien-selection-error {
  flex-basis:100%;
  max-width:34rem;
  padding:.15rem .25rem 0;
  color:#e58b8b;
}

.bratonien-selectable {
  position:relative;
}

.bratonien-selection-active .bratonien-selectable {
  cursor:pointer;
}

.bratonien-selection-active .bratonien-selectable::after {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  border:3px solid transparent;
  box-sizing:border-box;
  transition:border-color .12s ease,box-shadow .12s ease;
}

.bratonien-selection-active .bratonien-selectable.bratonien-selected::after {
  border-color:#f0a646;
  box-shadow:inset 0 0 0 9999px rgba(0,0,0,.14);
}

.bratonien-selection-active .bratonien-selectable.bratonien-selected::before {
  content:'\2713';
  position:absolute;
  top:.45rem;
  right:.45rem;
  z-index:20;
  width:1.8rem;
  height:1.8rem;
  line-height:1.8rem;
  text-align:center;
  border-radius:50%;
  background:#f0a646;
  color:#242424;
  font-weight:800;
  pointer-events:none;
}

@media (max-width:640px) {
  .bratonien-selection-bar {
    width:auto;
    margin:.35rem .5rem .75rem;
  }
  .bratonien-selection-status {
    width:100%;
  }
  .bratonien-selection-actions {
    width:100%;
  }
  .bratonien-selection-actions button {
    flex:1 1 auto;
  }
}