@use "design-system/palette";
@use "design-system/typography";

@mixin sprocket-error {
  border-left: 0.25rem solid palette.$error-standard;

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    border: 2px solid palette.$error-standard;

    &:focus {
      border-color: palette.$black;
    }
  }

  &.radio /* stylelint-disable-line nesting-selector-no-missing-scoping-root */,
  &.checkbox /* stylelint-disable-line nesting-selector-no-missing-scoping-root */ {
    padding-left: 4rem;

    input /* stylelint-disable-line no-descending-specificity */ {
      left: 1.5rem;
    }

    label:before /* stylelint-disable-line no-descending-specificity */ {
      left: 1rem;

      border: 2px solid palette.$error-standard;
    }
  }

  &.radio /* stylelint-disable-line nesting-selector-no-missing-scoping-root */ {
    input:checked + label:after {
      left: 1.5rem;
    }
  }

  &.checkbox /* stylelint-disable-line nesting-selector-no-missing-scoping-root */ {
    input:checked + label:after {
      left: 1.3125rem; // 21px;
    }
  }
}

%sprocket-error {
  @include sprocket-error;
}