/* From Uiverse.io by Galahhad */ 
/* Heavily modified */

.dropdown {
  --total_text_color: #eeeeee;
  --total_font_family: Menlo, Roboto Mono, monospace;

  --btn_bg: #3A3A3A;
  --btn_padding: 0.5em;
  --btn_height: 2em;
  --btn_outline_width: 0.0625em;
  --btn_outline_color: #A0A0A0;
  --btn_outline_offset: 0.0625em;
  --btn_gap: 0.3125em;

  --list_padding: 0.5em;
  --list_bg: var(--btn_bg);
  --list_gap: 0.1875em;
  --list_btn_hover_bg: #5A5656;
  --list_btn_active: #b9b9b970;
  --list_btn_padding: 0.35em 1em;
  --list_btn_gap: 0.4375em;
  --list_btn_outline_width: 0.0625em;
  --list_btn_outline_color: rgb(212, 210, 210);
  --list_offset: 0.35em;
  --list_btn_font_size: 14px;
}

#checkbox,
.popup-list-container,
.option {
  display: none;
}

.dropdown {
  color: var(--total_text_color);
  font-family: var(--total_font_family);
  position: relative;
  user-select: none;
}

.popup-list-container, .option {
  position: absolute;
  right: 0;
  top: calc(var(--btn_height) + var(--list_offset));

  z-index: 9999;
}

.dropdown-button {
  line-height: var(--btn_height);
  background-color: var(--btn_bg);
  padding: 0 var(--btn_padding);
  display: inline-flex;
  align-items: center;
  column-gap: var(--btn_gap);
  border: none;
  color: inherit;
  font-family: inherit;
  outline: none;
  font-weight: bold;
}
.dropdown-button:hover {
  cursor: pointer;
}

.popup-list {
  margin: 0;
  list-style-type: none;
  padding: var(--list_padding);
  background-color: var(--list_bg);
  display: flex;
  flex-direction: column;
  row-gap: var(--list_gap);
}

.popup-list label {
  display: flex;
  align-items: center;
  justify-content: start;
  column-gap: var(--list_btn_gap);
  padding: var(--list_btn_padding);
  white-space: nowrap;
}

.popup-list label span {
  font-size: var(--list_btn_font_size);
}

/* actions */

#checkbox:checked~.popup-button {
  outline: var(--btn_outline_width) solid var(--btn_outline_color);
  outline-offset: var(--btn_outline_offset);
}

#checkbox:checked~.popup-list-container {
  display: block;
}

.popup-list label:hover,
.dropdown-button:hover,
#checkbox:checked~.dropdown-button {
  background-color: var(--list_btn_hover_bg);
  cursor: pointer;
}


.popup-list label.active {
  background-color: var(--list_btn_active);
  outline: var(--list_btn_outline_width) solid var(--list_btn_outline_color);
}