.tb-toggle:not([hidden]) {
  align-items: center;
  background: var(--dcc-toggle-background);
  border: none;
  display: flex;
  gap: var(--dcc-toggle-switch-gap);
  padding: 0;
}

.tb-toggle:not([hidden]):focus {
  box-shadow: none;
  outline: none;
}

.tb-toggle:not([hidden]):focus-visible .tb-toggle__toggle {
  box-shadow:
    0 0 0 2px var(--dcc-focus-outline-inner-color),
    0 0 0 4px var(--dcc-focus-outline-outer-color);
}

.tb-toggle__toggle {
  align-items: center;
  background: var(--dcc-toggle-switch-background);
  border-radius: calc(var(--dcc-toggle-switch-height) / 2);
  box-sizing: border-box;
  display: flex;
  height: var(--dcc-toggle-switch-height);
  width: var(--dcc-toggle-switch-width);
}

.tb-toggle__toggle::after {
  aspect-ratio: 1 / 1;
  background: var(--dcc-toggle-switch-slider-background);
  border-radius: calc(var(--dcc-toggle-switch-slider-size) / 2);
  content: "";
  display: block;
  left: var(--dcc-toggle-switch-padding);
  position: relative;
  transition: var(--dcc-transition-in);
  width: var(--dcc-toggle-switch-slider-size);
}

.tb-toggle[data-expanded="true"]:not([hidden]) {
  & .tb-toggle__pressed--true {
    display: block;
  }

  & .tb-toggle__pressed--false {
    display: none;
  }

  .tb-toggle__toggle {
    background: var(--dcc-toggle-switch-background-pressed);
  }

  & .tb-toggle__toggle::after {
    left: calc(var(--dcc-toggle-switch-width) - var(--dcc-toggle-switch-padding) - var(--dcc-toggle-switch-slider-size));
  }
}

.tb-toggle[data-expanded="false"]:not([hidden]) {
  & .tb-toggle__pressed--true {
    display: none;
  }

  & .tb-toggle__pressed--false {
    display: block;
  }
}

[data-disclosure-expanded="false"]:not([hidden]) {
  display: none;
}

[data-disclosure-expanded="true"]:not([hidden]) {
  display: block;
}