.digit-switch-container {
  display: flex;
  align-items: center;
}

.digit-switch {
  width: theme(digitv2.spacers.spacer11);
  height: theme(digitv2.spacers.spacer6);
  background-color: #BFBFBF;
  border-radius: theme(digitv2.spacers.spacer4);
  position: relative;
  cursor: pointer;
  transition: background-color 0.2s ease;
  flex-shrink: 0;
  animation-timing-function: ease-out;
  animation-duration: 150ms;
  display: flex;
  align-items: center;
  justify-content: center;

  &:focus-within{
    outline: none;
  }

  &.switch-disabled{
    background-color: theme(digitv2.lightTheme.text-disabled);
  }
}

.digit-switch.checked {
  background-color: theme(digitv2.lightTheme.primary-1);
}

.digit-switch-toggle {
  width: 1.125rem;
  height: 1.125rem;
  background-color: theme(digitv2.lightTheme.paper-primary);
  border-radius: 50%;
  position: absolute;
  left: 0.125rem;
  transition: left 0.2s ease;
  box-shadow: theme(digitv2.spacers.spacer0) 0.125rem theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer0) #00230B33;
}

.digit-switch.checked .digit-switch-toggle {
  left: theme(digitv2.spacers.spacer6);
  background-color: theme(digitv2.lightTheme.paper-primary);
}

.digit-switch-label {
  @extend .typography.body-s;
  margin-left: theme(digitv2.spacers.spacer2);
  font-family: theme(digitv2.fontFamily.sans);
  font-style: theme(digitv2.fontStyle.normal);
  font-weight: theme(digitv2.fontWeight.regular);
  line-height: theme(digitv2.lineHeight.lineheight2);

  @media (max-aspect-ratio: 9/16) {
    font-size: theme(digitv2.fontSize.body-s.mobile);
  }

  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
    font-size: theme(digitv2.fontSize.body-s.tablet);
  }

  @media (min-aspect-ratio: 3/4) {
    font-size: theme(digitv2.fontSize.body-s.desktop);
  }

  @apply text-left;
  word-break: break-word;
  letter-spacing: theme(digitv2.spacers.spacer0);
  color: theme(digitv2.lightTheme.text-primary);

  &.labelFirst{
    margin:theme(digitv2.spacers.spacer0);
    margin-right:theme(digitv2.spacers.spacer2);
  }
}


.digit-switch-shape-on {
  position: absolute;
  top: theme(digitv2.spacers.spacer2);
  width: 0.125rem;
  height: theme(digitv2.spacers.spacer2);
  border-radius: 0.063rem;
  left: 0.625rem;
  background-color: theme(digitv2.lightTheme.primary-bg);
}

.digit-switch-shape-off {
  position: absolute;
  top: theme(digitv2.spacers.spacer2);
  width: theme(digitv2.spacers.spacer2);
  height: theme(digitv2.spacers.spacer2);
  right: theme(digitv2.spacers.spacer2);
  background-color: transparent;
  border-radius: 50%;
  border: 0.063rem solid theme(digitv2.lightTheme.generic-background);
}

.digit-switch-container.switch-disabled {
  .digit-switch {
    cursor: not-allowed;
    pointer-events: none;
  }

  .digit-switch-label {
    color: theme(digitv2.lightTheme.text-disabled);
  }
}