.scinet-ml-switcher {
  --scinet-ml-switcher-bg: transparent;
  --scinet-ml-switcher-border: rgb(100 105 112 / 45%);
  --scinet-ml-switcher-color: currentColor;
  --scinet-ml-switcher-active-bg: #1d2327;
  --scinet-ml-switcher-active-color: #fff;
  --scinet-ml-switcher-focus: #2271b1;
  display: inline-block;
  position: relative;
  z-index: 20;
  color: var(--scinet-ml-switcher-color);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.2;
}

.scinet-ml-switcher *,
.scinet-ml-switcher *::before,
.scinet-ml-switcher *::after {
  box-sizing: border-box;
}

.scinet-ml-switcher__list {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .25rem;
  list-style: none;
  margin: 0;
  padding: .2rem;
  border: 1px solid var(--scinet-ml-switcher-border);
  border-radius: .45rem;
  background: var(--scinet-ml-switcher-bg);
}

.scinet-ml-switcher__item {
  display: flex;
  margin: 0;
  padding: 0;
}

.scinet-ml-switcher__control,
.scinet-ml-switcher__summary {
  display: inline-flex;
  min-width: 2.5rem;
  min-height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: .3rem;
  color: inherit;
  line-height: 1;
  text-decoration: none;
}

.scinet-ml-switcher__control {
  padding: .65rem .7rem;
}

.scinet-ml-switcher a.scinet-ml-switcher__control:hover {
  background: rgb(127 127 127 / 13%);
  color: inherit;
}

.scinet-ml-switcher__control.is-current {
  background: var(--scinet-ml-switcher-active-bg);
  color: var(--scinet-ml-switcher-active-color);
  cursor: default;
}

.scinet-ml-switcher__control.is-disabled {
  opacity: .45;
  cursor: not-allowed;
}

.scinet-ml-switcher__control.is-missing {
  opacity: .72;
  text-decoration-style: dotted;
}

.scinet-ml-switcher a:focus-visible,
.scinet-ml-switcher summary:focus-visible {
  outline: 3px solid var(--scinet-ml-switcher-focus);
  outline-offset: 2px;
}

.scinet-ml-switcher__sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.scinet-ml-switcher__dropdown {
  position: relative;
}

.scinet-ml-switcher__summary {
  gap: .55rem;
  padding: .65rem .75rem;
  border: 1px solid var(--scinet-ml-switcher-border);
  background: var(--scinet-ml-switcher-bg);
  cursor: pointer;
  list-style: none;
}

.scinet-ml-switcher__summary::-webkit-details-marker {
  display: none;
}

.scinet-ml-switcher__chevron {
  width: .45rem;
  height: .45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-.12rem) rotate(45deg);
  transition: transform .15s ease;
}

.scinet-ml-switcher__dropdown[open] .scinet-ml-switcher__chevron {
  transform: translateY(.12rem) rotate(225deg);
}

.scinet-ml-switcher--dropdown .scinet-ml-switcher__list {
  position: absolute;
  top: calc(100% + .4rem);
  right: 0;
  display: grid;
  min-width: 100%;
  padding: .3rem;
  background: #fff;
  box-shadow: 0 .75rem 2rem rgb(0 0 0 / 16%);
  color: #1d2327;
}

.scinet-ml-switcher--dropdown .scinet-ml-switcher__control {
  width: 100%;
  justify-content: flex-start;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .scinet-ml-switcher__chevron {
    transition: none;
  }
}