:import {
  -st-from: '../../Foundation/stylable/colors.st.css';
  -st-named: THEME-COLOR-10, D10-30;
}

@st-import [
  --wds-color-text-primary, 
  --wds-color-text-disabled, 
  --wds-space-50
  ] from "@wix/design-system-tokens/all.st.css";

.root {
  -st-states: size(enum(tiny, small, medium, large)),
    border(enum(standard, round, bottomLine)),
    inPrefix, inSuffix, disabled;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: var(--wds-color-text-primary, value(THEME-COLOR-10));
}

.root:size(tiny):inPrefix,
.root:size(small):inPrefix {
  margin: auto 0;
}

.root:size(tiny):inSuffix,
.root:size(small):inSuffix,
.root:size(medium):inSuffix {
  margin: auto var(--wds-space-50, 3px);
}

.root:size(medium):border(round):inSuffix,
.root:size(large):inSuffix {
  margin: auto 0 auto var(--wds-space-50, 3px);
}

:global([dir="rtl"]) .root:size(medium):border(round):inSuffix,
:global([dir="rtl"]) .root:size(large):inSuffix {
  margin: auto var(--wds-space-50, 3px) auto 0;
}

.root:disabled {
  color: var(--wds-color-text-disabled, value(D10-30));
}

/* st-namespace-reference="../../../../src/Input/IconAffix/IconAffix.st.css" */