.toggleButtonGroup {
  width: 180px;
}

@media (max-width: calc(1200px - 0.5px)) {
  .toggleButtonGroup {
    width: 140px;
  }
}

.toggleButton {
  --bs-btn-active-bg: var(--color-primary);
  --bs-btn-active-border-color: var(--color-primary);

  font-size: 14px;
  background-color: var(--color-surface);
  color: var(--color-text);
  border: var(--color-icon) 2px solid;
  transition:
    border-color var(--trans-dur),
    background-color var(--trans-dur),
    color var(--trans-dur);
  padding: 0.25rem 0;
  width: 50%;
}

@media (max-width: calc(1320px - 0.5px)) {
  .toggleButton {
    font-size: 12px;
  }
}

.toggleButton:hover {
  background-color: var(--color-surface-hover);
  color: var(--color-text);
  border: var(--color-primary-hover) 2px solid;
}

.toggleButton:active {
  background-color: var(--color-surface-active) !important;
  color: var(--color-text) !important;
}

.toggleButton:focus {
  box-shadow: none !important;
}

.toggleButton:global(.active) {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}
