wix-style-react/dist/src/Input/Affix/Affix.st.css

wix-style-react

:import {
  -st-from: '../../Foundation/stylable/typography.st.css';
  -st-named: text-tiny-thin, text-small-normal, text-small-thin, text-medium-normal, text-medium-thin;
}

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

@st-import [
  --wds-input-value-font-line-height-tiny,
  --wds-input-value-font-line-height-small,
  --wds-input-value-font-line-height-medium,
  --wds-input-value-font-line-height-large,

  --wds-input-value-font-size-tiny,
  --wds-input-value-font-size-small,
  --wds-input-value-font-size-medium,
  --wds-input-value-font-size-large,
  --wds-color-text-standard-secondary-light,
  --wds-color-text-placeholder,
  --wds-color-text-disabled, 
  --wds-space-50,
  --wds-space-100,
  ] 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;
  color: var(--wds-color-text-placeholder, value(D40));
  flex: 1 0 auto;
}

.root:inPrefix {
  margin: auto 0 auto var(--wds-space-100, 6px);
}

:global([dir="rtl"]) .root:inPrefix {
  margin: auto var(--wds-space-100, 6px) auto 0;
}

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

:global([dir="rtl"]) .root:size(tiny):inSuffix,
:global([dir="rtl"]) .root:size(small):inSuffix {
  margin: auto var(--wds-space-100, 6px) auto var(--wds-space-50, 3px);
}

.root:size(medium):inSuffix,
.root:size(large):inSuffix {
  margin: auto var(--wds-space-100, 6px);
}

:global([dir="rtl"]) .root:size(medium):inSuffix,
:global([dir="rtl"]) .root:size(large):inSuffix {
  margin: auto var(--wds-space-100, 6px);
}

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

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

.root:size(tiny){
  -st-mixin: text-tiny-thin;
  font-size: var(--wds-input-value-font-size-tiny, 12px);
  line-height: var(--wds-input-value-font-line-height-tiny, 15px);
}
.root:size(small) {
  -st-mixin: text-small-thin;
  font-size: var(--wds-input-value-font-size-small, 14px);
  line-height: var(--wds-input-value-font-line-height-small, 18px);
}

.root:size(medium) {
  -st-mixin: text-medium-thin;
  font-size: var(--wds-input-value-font-size-medium, 16px);
  line-height: var(--wds-input-value-font-line-height-medium, 24px);
}

.root:size(large) {
  -st-mixin: text-medium-thin;
  font-size: var(--wds-input-value-font-size-large, 16px);
  line-height: var(--wds-input-value-font-line-height-large, 24px);
}

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

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