SInput {
  display: inline-flex;
  width: 100%;
  align-items: center;
  position: relative;
  z-index: 0;
  vertical-align: middle;
  /* disable-tokens-validator */
  padding: 1px;
  box-sizing: border-box;

  & input:-webkit-autofill {
    border-radius: var(--intergalactic-control-rounded, 6px);
    -webkit-box-shadow: 0 0 0 30px rgb(250, 255, 189) inset;

    &~SOutline {
      background-color: rgb(250, 255, 189);
    }
  }

  SValue {
    &:focus, &:focus-visible {
      outline: none;

      &::after {
        outline: none;
      }
    }
  }
}

SValue {
  /* hack for firefox */
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  box-sizing: border-box;
  color: var(--intergalactic-text-primary, #191b23);
  font-size: inherit;
  text-overflow: ellipsis;
  font-family: inherit;
  background: transparent;

  &::placeholder {
    color: var(--intergalactic-text-placeholder, #8a8e9b);
  }

  &:not(:disabled):read-only~SOutline {
    background: var(--intergalactic-bg-secondary-neutral, #f4f5f9);
  }

  &:disabled {
    user-select: none;
    opacity: var(--intergalactic-disabled-opacity, 0.3);
  }
}

SInput[disabled] SOutline,
SValue:disabled~SOutline {

  opacity: var(--intergalactic-disabled-opacity, 0.3);
  cursor: default;
  pointer-events: none;
}

SOutline {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid;
  border-radius: var(--intergalactic-control-rounded, 6px);
  z-index: -1;
  background: var(--intergalactic-bg-primary-neutral, #ffffff);
}

SAddon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
  padding: 0 var(--intergalactic-spacing-2x, 8px);
  height: 100%;
  color: var(--intergalactic-icon-secondary-neutral, #a9abb6);
}

SAddon[interactive] {
  cursor: pointer;

  &:hover {
    color: var(--intergalactic-icon-secondary-neutral-hover-active, #878992);
  }
}

SAddon[disabled] {
  opacity: var(--intergalactic-disabled-opacity, 0.3);
  cursor: default;
  pointer-events: none;
}

SAddon[size='m']:not(SButton) {
  padding: 0 var(--intergalactic-spacing-2x, 8px);
}

SAddon[size='l']:not(SButton) {
  padding: 0 var(--intergalactic-spacing-2x, 8px) 0 var(--intergalactic-spacing-3x, 12px);
}

SInput SAddon:nth-last-child(2) {
  margin-right: -1px;
}

SValue[size='m'] {
  padding: 0 var(--intergalactic-spacing-2x, 8px);
}

SValue[size='l'] {
  padding: 0 var(--intergalactic-spacing-3x, 12px);
}

SInput[size='m'] {
  font-size: var(--intergalactic-fs-200, 14px);
  height: var(--intergalactic-form-control-m, 28px);
}

SInput[size='l'] {
  font-size: var(--intergalactic-fs-300, 16px);
  height: var(--intergalactic-form-control-l, 40px);
}

SInput:has(SValue:focus-visible) {
  z-index: 1;
}

SInput[state='normal'] {
  & SOutline {
    border-color: var(--intergalactic-border-primary, #c4c7cf);
  }

  &:has(SValue:focus-visible) SOutline {
    @mixin focus-outline-mixin {
      outline-offset: 0;
      transition-property: outline-color, outline-width;
    }
    border-color: var(--intergalactic-border-info-active, #006dca);
  }
}

SInput[state='valid'] {
  & SOutline {
    border-color: var(--intergalactic-border-success-active, #007c65);
  }

  &:has(SValue:focus-visible) SOutline {
    @mixin focus-outline-mixin {
      outline-offset: 0;
      transition-property: outline-color, outline-width;
    }
    border-color: var(--intergalactic-border-success-active, #007c65);
    outline-color: var(--intergalactic-keyboard-focus-valid-outline, #009f81);
  }
}

SInput[state='invalid'] {
  & SOutline {
    border-color: var(--intergalactic-border-critical-active, #d1002f);
  }

  &:has(SValue:focus-visible) SOutline {
    @mixin focus-outline-mixin {
      outline-offset: 0;
      transition-property: outline-color, outline-width;
    }
    border-color: var(--intergalactic-border-critical-active, #d1002f);
    outline-color: var(--intergalactic-keyboard-focus-invalid-outline, #ff4953);
  }
}

SInput[neighborLocation='right'] {
  & SOutline {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}

SInput[neighborLocation='both'] {
  & SOutline {
    border-radius: 0;
    border-left: none;
  }
}

SInput[neighborLocation='left'] {
  & SOutline {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
  }
}

SValue[neighborLocation='right'] {
  padding-right: 0;
}

SValue[neighborLocation='both'] {
  padding-left: 0;
  padding-right: 0;
}

SValue[neighborLocation='left'] {
  padding-left: 0;
}