/* src/component/src/component/index.module.css */
@layer ddsweb-molecules {
  @layer ddsweb-toggle {
    ._24CXba_container {
      --ddsweb-form-group-children-margin-bottom: var(--ddsweb-theme-spacing-md);
      --ddsweb-toggle-pill-offset: 3px;
      --ddsweb-toggle-pill-icon-dimension: 24px;
      --ddsweb-toggle-pill-height: var(--ddsweb-toggle-pill-icon-dimension);
      --ddsweb-toggle-pill-width: 40px;
      gap: var(--ddsweb-theme-spacing-sm);
      line-height: var(--ddsweb-theme-base-line-height);
      font-family: var(--ddsweb-theme-base-font-family);
      display: flex;
    }
    ._24CXba_pillContainer {
      flex-grow: 0;
      position: relative;
    }
    ._24CXba_labelContainer {
      flex-grow: 1;
      align-items: center;
      display: flex;
    }
    ._24CXba_withLabelAndDescription {
      display: unset;
      padding-top: var(--ddsweb-theme-spacing-xxx);
    }
    p._24CXba_description {
      margin-top: var(--ddsweb-theme-spacing-xx);
    }
    ._24CXba_hiddenInput {
      z-index: 1;
      width: var(--ddsweb-toggle-pill-width);
      height: var(--ddsweb-toggle-pill-height);
      cursor: pointer;
      opacity: 0;
      margin: 0;
      position: absolute;
      top: 0;
      left: 0;
    }
    ._24CXba_hiddenInput:disabled {
      cursor: default;
    }
    ._24CXba_pill {
      width: var(--ddsweb-toggle-pill-width);
      height: var(--ddsweb-toggle-pill-height);
      outline: transparent solid var(--ddsweb-theme-base-focus-outline-width);
      outline-offset: 1px;
      background-color: var(--ddsweb-theme-colors-grayscale);
      transition: all var(--ddsweb-theme-base-transition-duration);
      border-radius: 99px;
      position: relative;
    }
    ._24CXba_hiddenInput:checked + ._24CXba_pill {
      background-color: var(--ddsweb-theme-colors-active);
    }
    ._24CXba_hiddenInput:checked + ._24CXba_pill ._24CXba_pillIconContainer {
      left: calc(100% - calc(var(--ddsweb-toggle-pill-icon-dimension) - var(--ddsweb-toggle-pill-offset)));
      color: var(--ddsweb-theme-colors-active);
    }
    ._24CXba_hiddenInput:focus + ._24CXba_pill,
    ._24CXba_hiddenInput:hover + ._24CXba_pill {
      outline-color: var(--ddsweb-theme-colors-active);
    }
    ._24CXba_hiddenInput:disabled + ._24CXba_pill {
      opacity: var(--ddsweb-theme-base-rgb-opacity);
      outline-color: #0000;
    }
    ._24CXba_pillIconContainer {
      top: var(--ddsweb-toggle-pill-offset);
      bottom: var(--ddsweb-toggle-pill-offset);
      left: var(--ddsweb-toggle-pill-offset);
      aspect-ratio: 1;
      background-color: var(--ddsweb-theme-colors-background-base);
      color: var(--ddsweb-theme-colors-background-base);
      transition: all var(--ddsweb-theme-base-transition-duration);
      border-radius: 99px;
      place-content: center;
      display: grid;
      position: absolute;
    }
    ._24CXba_pillIcon {
      --ddsweb-theme-icons-16-height: var(--ddsweb-theme-spacing-sm);
      --ddsweb-theme-icons-16-width: var(--ddsweb-theme-spacing-sm);
      color: inherit;
      display: block;
    }
    @media (forced-colors: active) {
      ._24CXba_pill {
        background-color: canvastext;
        outline-width: 0;
      }
      ._24CXba_hiddenInput:focus + ._24CXba_pill,
      ._24CXba_hiddenInput:hover + ._24CXba_pill {
        outline-width: var(--ddsweb-theme-base-focus-outline-width);
      }
      ._24CXba_hiddenInput:disabled + ._24CXba_pill {
        outline-width: 0;
      }
      ._24CXba_hiddenInput:checked + ._24CXba_pill {
        background-color: canvastext;
      }
      ._24CXba_pillIconContainer {
        background-color: canvas;
      }
      ._24CXba_pillIcon {
        color: canvastext;
        forced-color-adjust: auto;
      }
    }
  }
}
._24CXba_hiddenInput:checked + ._24CXba_pill ._24CXba_pillIconContainer > svg {
  display: unset;
}
._24CXba_hiddenInput + ._24CXba_pill ._24CXba_pillIconContainer > svg {
  display: none;
}


/*# sourceMappingURL=2162e8b4573a4428a2eb.css.map*/