/* stylelint-disable */
@layer drv.components.toggle {
  .drv-toggle {
    display: flex;
    position: relative;
    align-items: flex-start;
    gap: var(--drv-spacing-03, 0.5rem) var(--drv-spacing-05, 1rem);
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
  }
  @media (max-width: 19.98rem) {
    .drv-toggle {
      flex-wrap: wrap;
    }
  }
  .drv-toggle--inline {
    display: inline-flex;
  }
  .drv-toggle__label {
    font-size: var(--drv-font-body-01-sm-font-size, 1rem);
    line-height: var(--drv-font-body-01-sm-line-height, 1.5);
    letter-spacing: var(--drv-font-body-01-sm-letter-spacing, 0.4px);
    font-weight: var(--drv-font-body-01-sm-font-weight, var(--drv-font-weight-normal, 400));
    display: inline-flex;
    flex-grow: 1;
    align-items: center;
    margin-block-start: 0.25rem;
    -webkit-hyphens: auto;
            hyphens: auto;
    cursor: pointer;
    -webkit-user-select: none;
            user-select: none;
  }
  @media (min-width: 64.0625rem) {
    .drv-toggle__label {
      font-size: var(--drv-font-body-01-lg-font-size, 1.125rem);
      line-height: var(--drv-font-body-01-lg-line-height, 1.5);
      letter-spacing: var(--drv-font-body-01-lg-letter-spacing, 0.3px);
    }
  }
  @media (min-width: 64.0625rem) {
    .drv-toggle__label {
      margin-block-start: 0.0625rem;
    }
  }
  .drv-toggle__label--hidden {
    position: absolute;
    block-size: 1px;
    inline-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    white-space: nowrap;
    clip-path: inset(100%);
  }
  .drv-toggle__label--bold {
    font-size: var(--drv-font-title-small-sm-font-size, 1rem);
    line-height: var(--drv-font-title-small-sm-line-height, 1.5);
    letter-spacing: var(--drv-font-title-small-sm-letter-spacing, 0.4px);
    font-weight: var(--drv-font-title-small-sm-font-weight, var(--drv-font-weight-bold, 600));
  }
  @media (min-width: 64.0625rem) {
    .drv-toggle__label--bold {
      font-size: var(--drv-font-title-small-lg-font-size, 1.125rem);
      line-height: var(--drv-font-title-small-lg-line-height, 1.5);
      letter-spacing: var(--drv-font-title-small-lg-letter-spacing, 0.3px);
    }
  }
  .drv-toggle__state {
    display: inline-grid;
    grid-template-areas: "toggle state";
    grid-template-columns: calc(var(--drv-toggle-width, 3.125rem) + var(--drv-toggle-border-width, 0.125rem)) auto;
    place-items: center end;
    inline-size: max-content;
    -webkit-user-select: none;
            user-select: none;
    justify-self: end;
    gap: var(--drv-spacing-03, 0.5rem);
  }
  @media (min-width: 37.5rem) {
    .drv-toggle__state {
      grid-template-areas: "state toggle";
      grid-template-columns: auto calc(var(--drv-toggle-width, 3.125rem) + var(--drv-toggle-border-width, 0.125rem));
    }
  }
  .drv-toggle__state::before {
    content: "";
    grid-area: toggle;
    block-size: calc(var(--drv-toggle-height, 1.875rem) + var(--drv-toggle-border-width, 0.125rem));
    inline-size: calc(var(--drv-toggle-width, 3.125rem) + var(--drv-toggle-border-width, 0.125rem));
    border: calc(var(--drv-toggle-border-width, 0.125rem)) solid var(--drv-color-ui-03, #6983a1);
    border-radius: calc(var(--drv-toggle-height, 1.875rem));
    inset-inline-end: 0;
  }
  .drv-toggle__state::after {
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    content: "";
    grid-area: toggle;
    block-size: calc(var(--drv-toggle-height, 1.875rem) - var(--drv-toggle-space, 0.125rem) - 2 * var(--drv-toggle-border-width, 0.125rem));
    inline-size: auto;
    transform: translateX(calc((var(--drv-toggle-width, 3.125rem) - var(--drv-toggle-space, 0.125rem)) * -1 + 100%));
    transition-property: background-color, border-color, transform; /* try to define single properties */
    transition-duration: 200ms;
    border: calc(var(--drv-toggle-border-width, 0.125rem)) solid var(--drv-color-interactive-01, #083163);
    border-radius: 50%;
    background: var(--drv-color-interactive-01, #083163);
    aspect-ratio: 1;
  }
  .drv-toggle__state > [data-on],
  .drv-toggle__state > [data-off] {
    font-size: var(--drv-font-label-01-sm-font-size, 0.875rem);
    line-height: var(--drv-font-label-01-sm-line-height, 1.5);
    letter-spacing: var(--drv-font-label-01-sm-letter-spacing, 0.5px);
    font-weight: var(--drv-font-label-01-sm-font-weight, var(--drv-font-weight-bold, 600));
    grid-area: state;
    color: var(--drv-color-interactive-01, #083163);
    text-align: end;
    pointer-events: none;
    justify-self: start;
  }
  @media (min-width: 64.0625rem) {
    .drv-toggle__state > [data-on],
    .drv-toggle__state > [data-off] {
      font-size: var(--drv-font-label-01-lg-font-size, 0.9375rem);
      line-height: var(--drv-font-label-01-lg-line-height, 1.5333333333);
    }
  }
  @media (min-width: 37.5rem) {
    .drv-toggle__state > [data-on],
    .drv-toggle__state > [data-off] {
      justify-self: initial;
    }
  }
  .drv-toggle__state > [data-on] {
    visibility: hidden;
  }
  .drv-toggle:focus-within [data-on],
  .drv-toggle:focus-within [data-off], .drv-toggle:hover [data-on],
  .drv-toggle:hover [data-off] {
    color: var(--drv-color-interactive-01-hover, #000000);
  }
  .drv-toggle:focus-within .drv-toggle__state::before, .drv-toggle:hover .drv-toggle__state::before {
    border-color: var(--drv-color-interactive-01-hover, #000000);
    background: var(--drv-color-interactive-02, #ffffff);
  }
  .drv-toggle:focus-within .drv-toggle__state::after, .drv-toggle:hover .drv-toggle__state::after {
    border-color: var(--drv-color-interactive-01-hover, #000000);
    background: var(--drv-color-interactive-02, #ffffff);
  }
  .drv-toggle:focus-within [role=switch]:checked ~ .drv-toggle__state::before, .drv-toggle:hover [role=switch]:checked ~ .drv-toggle__state::before {
    border-color: var(--drv-color-interactive-01-hover, #000000);
    background: var(--drv-color-interactive-01-hover, #000000);
  }
  .drv-toggle:focus-within [role=switch]:checked ~ .drv-toggle__state::after, .drv-toggle:hover [role=switch]:checked ~ .drv-toggle__state::after {
    border-color: var(--drv-color-interactive-02, #ffffff);
    background: var(--drv-color-interactive-01-hover, #000000);
  }
  @supports not selector(:has(+ * )) {
    .drv-toggle:focus-within {
      border-radius: 0.5rem;
      outline: 0.0625rem solid var(--drv-color-interactive-01-hover, #000000);
      outline-offset: var(--drv-spacing-02, 0.25rem);
      box-shadow: 0 0 0 var(--drv-spacing-02, 0.25rem) var(--drv-color-ui-01, #ffffff);
    }
  }
  .drv-toggle:has(input:focus-visible) {
    border-radius: 0.5rem;
    outline: 0.0625rem solid var(--drv-color-interactive-01-hover, #000000);
    outline-offset: var(--drv-spacing-02, 0.25rem);
    box-shadow: 0 0 0 var(--drv-spacing-02, 0.25rem) var(--drv-color-ui-01, #ffffff);
  }
  .drv-toggle [role=switch] {
    position: absolute;
    block-size: 1px;
    inline-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    white-space: nowrap;
    clip-path: inset(100%);
  }
  .drv-toggle [role=switch]:checked ~ .drv-toggle__state::before {
    border-color: var(--drv-color-interactive-01, #083163);
    background-color: var(--drv-color-interactive-01, #083163);
  }
  .drv-toggle [role=switch]:checked ~ .drv-toggle__state::after {
    transform: translateX(calc((var(--drv-toggle-space, 0.125rem) + var(--drv-toggle-border-width, 0.125rem)) * -1));
    border-color: var(--drv-color-interactive-02, #ffffff);
    background-color: var(--drv-color-interactive-02, #ffffff);
  }
  .drv-toggle [role=switch]:checked ~ .drv-toggle__state > [data-off] {
    visibility: hidden;
  }
  .drv-toggle [role=switch]:checked ~ .drv-toggle__state > [data-on] {
    visibility: visible;
  }
  .drv-toggle [role=switch]:disabled ~ .drv-toggle__label {
    color: var(--drv-color-interactive-disabled-01, #909090);
  }
  .drv-toggle [role=switch]:disabled ~ .drv-toggle__state::before {
    border-color: var(--drv-color-interactive-disabled-02, #e9e9e9);
    background-color: var(--drv-color-interactive-02, #ffffff);
  }
  .drv-toggle [role=switch]:disabled ~ .drv-toggle__state::after {
    border-color: var(--drv-color-interactive-disabled-02, #e9e9e9);
    background-color: var(--drv-color-interactive-disabled-02, #e9e9e9);
  }
  .drv-toggle [role=switch]:disabled ~ .drv-toggle__state > [data-on],
  .drv-toggle [role=switch]:disabled ~ .drv-toggle__state > [data-off] {
    color: var(--drv-color-interactive-disabled-01, #909090);
  }
  .drv-toggle [role=switch]:disabled:checked ~ .drv-toggle__state::before {
    border-color: var(--drv-color-interactive-disabled-02, #e9e9e9);
    background-color: var(--drv-color-interactive-disabled-02, #e9e9e9);
  }
  .drv-toggle [role=switch]:disabled:checked ~ .drv-toggle__state::after {
    border-color: var(--drv-color-interactive-02, #ffffff);
    background-color: var(--drv-color-interactive-02, #ffffff);
  }
  .drv-toggle-host {
    display: block;
  }
}