/* Multi select button group (study-tab style) */
/* Supports single and multiple selection modes */

.base-multi-select-button-group-wrap {
  width: 100%;
}

.base-multi-select-button-group {
  display: flex;
  gap: 4px;
  background: transparent;
  border-radius: 12px;
  padding: 0;
  margin-bottom: 0;
}

.base-multi-select-button-group__btn {
  appearance: none;
  -webkit-appearance: none;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 12px !important;
  margin: 0 !important;
  min-height: 0 !important;
  line-height: 1 !important;
  cursor: pointer;
  font: inherit;
  color: inherit;
  flex: 1 !important;
  height: 34px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--muted-text) !important;
  text-decoration: none !important;
  white-space: nowrap;
  text-transform: none !important;
  letter-spacing: normal !important;
  border: 1px solid var(--border-color) !important;
  background-color: var(--table-header-bg) !important;
}

.base-multi-select-button-group__btn:hover,
.base-multi-select-button-group__btn:focus-visible,
.base-multi-select-button-group__btn:active {
  transform: none !important;
}

.base-multi-select-button-group__btn:focus-visible {
  outline: 2px solid
    color-mix(in srgb, var(--primary-blue, #6366f1) 45%, transparent);
  outline-offset: 1px;
}

.base-multi-select-button-group__btn--active {
  background: #eaf2ff !important;
  color: #1f4fa8 !important;
  border-color: #9db9ec !important;
}

body.theme-dark .base-multi-select-button-group__btn--active {
  background: #22344f !important;
  color: #9fc4ff !important;
  border-color: #3a5478 !important;
}

.base-multi-select-button-group__btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.base-multi-select-button-group__icon {
  font-size: 14px;
  margin-right: 0 !important;
}

.base-multi-select-button-group__label {
  white-space: nowrap;
}

.base-multi-select-button-group[data-base-multi-select-button-group-columns='2'] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.base-multi-select-button-group[data-base-multi-select-button-group-columns='2']
  .base-multi-select-button-group__btn {
  width: 100%;
}

@media (max-width: 900px) {
  .base-multi-select-button-group {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: thin;
  }

  .base-multi-select-button-group::-webkit-scrollbar {
    height: 4px;
  }

  .base-multi-select-button-group::-webkit-scrollbar-track {
    background: transparent;
  }

  .base-multi-select-button-group::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 999px;
  }

  .base-multi-select-button-group__btn {
    flex: 1 0 auto !important;
  }
}