.navds-toggle-group__wrapper {
  display: grid;
  justify-items: start;
  gap: var(--a-spacing-2);
}

.navds-toggle-group__wrapper--fill {
  justify-items: initial;
}

.navds-toggle-group {
  border-radius: var(--a-border-radius-medium);
  background-color: var(--ac-toggle-group-bg, var(--a-surface-transparent));
  box-shadow: inset 0 0 0 1px var(--ac-toggle-group-border, var(--a-border-default));
  padding: calc(var(--a-spacing-1) + 0.0625rem);
  gap: var(--a-spacing-1);
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

.navds-toggle-group--small {
  padding: calc(var(--a-spacing-05) + 0.0625rem);
}

.navds-toggle-group--neutral {
  background-color: var(--ac-toggle-group-neutral-bg, var(--a-surface-transparent));
  box-shadow: inset 0 0 0 1px var(--ac-toggle-group-neutral-border, var(--a-border-default));
}

.navds-toggle-group__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--a-spacing-1) var(--a-spacing-3);
  min-height: 2.375rem;
  border: none;
  cursor: pointer;
  background-color: var(--ac-toggle-group-button-bg, var(--a-surface-transparent));
  color: var(--ac-toggle-group-button-text, var(--a-text-default));
  border-radius: var(--a-border-radius-small);
  min-width: fit-content;
  font-weight: var(--a-font-weight-regular);
}

.navds-toggle-group--medium > :where(.navds-toggle-group__button:first-of-type:focus-visible) {
  border-start-start-radius: 1px;
  border-end-start-radius: 1px;
}

.navds-toggle-group--medium > :where(.navds-toggle-group__button:last-of-type:focus-visible) {
  border-start-end-radius: 1px;
  border-end-end-radius: 1px;
}

.navds-toggle-group--neutral > .navds-toggle-group__button {
  background-color: var(--ac-toggle-group-button-neutral-bg, var(--a-surface-transparent));
  color: var(--ac-toggle-group-button-neutral-text, var(--a-text-default));
}

.navds-toggle-group__button:hover {
  background-color: var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle));
  color: var(--ac-toggle-group-button-hover-text, var(--a-text-default));
}

.navds-toggle-group--neutral > .navds-toggle-group__button:hover {
  background-color: var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
  color: var(--ac-toggle-group-button-neutral-hover-text, var(--a-text-default));
}

.navds-toggle-group__button:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 1px;
  box-shadow:
    0 0 0 1px var(--a-surface-default),
    0 0 0 4px var(--a-border-focus);
}

@supports not selector(:focus-visible) {
  .navds-toggle-group__button:focus {
    outline: 2px solid transparent;
    outline-offset: 1px;
    box-shadow:
      0 0 0 1px var(--a-surface-default),
      0 0 0 4px var(--a-border-focus);
  }
}

.navds-toggle-group__button:focus-visible:hover[aria-pressed="false"] {
  box-shadow:
    0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)),
    0 0 0 4px var(--a-border-focus);
}

@supports not selector(:focus-visible) {
  .navds-toggle-group__button:focus:hover[aria-pressed="false"] {
    box-shadow:
      0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)),
      0 0 0 4px var(--a-border-focus);
  }
}

.navds-toggle-group--neutral > .navds-toggle-group__button:focus:hover[aria-pressed="false"] {
  box-shadow:
    0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
    0 0 0 4px var(--a-border-focus);
}

@supports not selector(:focus-visible) {
  .navds-toggle-group--neutral > .navds-toggle-group__button:focus-visible:hover[aria-pressed="false"] {
    box-shadow:
      0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
      0 0 0 4px var(--a-border-focus);
  }
}

.navds-toggle-group__button-inner {
  display: flex;
  align-items: center;
  gap: var(--a-spacing-2);
  font-weight: inherit;
}

.navds-toggle-group__button-inner > * {
  flex-shrink: 0;
}

.navds-toggle-group__button[aria-pressed="true"],
.navds-toggle-group__button[aria-checked="true"] {
  background-color: var(--ac-toggle-group-selected-bg, var(--a-surface-action-selected));
  color: var(--ac-toggle-group-selected-text, var(--a-text-on-action));
}

.navds-toggle-group--neutral > .navds-toggle-group__button[aria-pressed="true"],
.navds-toggle-group--neutral > .navds-toggle-group__button[aria-checked="true"] {
  background-color: var(--ac-toggle-group-neutral-selected-bg, var(--a-surface-neutral-selected));
  color: var(--ac-toggle-group-neutral-selected-text, var(--a-text-on-neutral));
}

.navds-toggle-group--small > .navds-toggle-group__button {
  padding: var(--a-spacing-05) var(--a-spacing-3);
  min-height: 1.625rem;
  min-width: fit-content;
}

.navds-toggle-group__button > .navds-toggle-group__button-inner > svg {
  font-size: 1.5rem;
}

.navds-toggle-group--small > .navds-toggle-group__button > .navds-toggle-group__button-inner > svg {
  font-size: 1.125rem;
}

@media (forced-colors: active) {
  .navds-toggle-group {
    border: 2px solid transparent;
  }

  .navds-toggle-group__button:hover {
    color: highlight;
  }

  .navds-toggle-group__button[aria-checked="true"],
  .navds-toggle-group__button[aria-pressed="true"] {
    background-color: selecteditem;
    color: selecteditemtext;
  }

  .navds-toggle-group__button[aria-checked="true"] > *,
  .navds-toggle-group__button[aria-pressed="true"] > * {
    forced-color-adjust: none;
  }

  .navds-toggle-group__button:active {
    background-color: unset !important;
  }

  .navds-toggle-group__button:focus-visible {
    outline-color: highlight;
  }
}
