/* 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, #fb596e) 45%, transparent);
  outline-offset: 1px;
}

/* Selected state follows the project's brand colour - it used to be a
   hardcoded blue, which read as "wrong brand" on every non-blue project. */
.base-multi-select-button-group__btn--active {
  background: color-mix(
    in srgb,
    var(--primary-blue) 12%,
    var(--card-bg)
  ) !important;
  color: var(--primary-blue) !important;
  border-color: color-mix(
    in srgb,
    var(--primary-blue) 45%,
    transparent
  ) !important;
}

.base-multi-select-button-group__btn--active:hover,
.base-multi-select-button-group__btn--active:focus,
.base-multi-select-button-group__btn--active:focus-visible,
.base-multi-select-button-group__btn--active:active {
  background: color-mix(
    in srgb,
    var(--primary-blue) 12%,
    var(--card-bg)
  ) !important;
  color: var(--primary-blue) !important;
  border-color: color-mix(
    in srgb,
    var(--primary-blue) 45%,
    transparent
  ) !important;
}

.base-multi-select-button-group__btn:not(
    .base-multi-select-button-group__btn--active
  ):hover,
.base-multi-select-button-group__btn:not(
    .base-multi-select-button-group__btn--active
  ):focus,
.base-multi-select-button-group__btn:not(
    .base-multi-select-button-group__btn--active
  ):active {
  background-color: var(--table-header-bg) !important;
  color: var(--muted-text) !important;
  border-color: var(--border-color) !important;
}

body.theme-dark .base-multi-select-button-group__btn--active,
body.theme-dark .base-multi-select-button-group__btn--active:hover,
body.theme-dark .base-multi-select-button-group__btn--active:focus,
body.theme-dark .base-multi-select-button-group__btn--active:focus-visible,
body.theme-dark .base-multi-select-button-group__btn--active:active {
  background: color-mix(
    in srgb,
    var(--primary-blue) 22%,
    var(--card-bg)
  ) !important;
  color: color-mix(in srgb, var(--primary-blue) 70%, white) !important;
  border-color: color-mix(
    in srgb,
    var(--primary-blue) 55%,
    transparent
  ) !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;
  }
}