@asphalt-react/textfield/dist/index.css

Textfield

.Base__iUqlA {
  /* default custom properties */
  --surface-color: var(--interactive-surface-primary-default, #ffffff);
  --font-color: var(--content-primary, #2d2e34);
  --placeholder-color: var(--content-muted, #8e919b);
  --border-color: var(--interactive-default, #cbcfd7);
  --border-radius: var(--roundness-user-input-M, 0.375rem);
  --focus-appearance: var(--focus-outline, 2px solid);
  --focus-color: var(--interactive-focus, #86afff);
  --focus: var(--focus-appearance) var(--focus-color);

  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  color: var(--font-color);
  font: var(--font);
  box-sizing: border-box;
  min-width: 160px;
}

.Base__iUqlA:focus-visible {
  outline: var(--focus);
}

.Base__iUqlA:hover {
  --surface-color: var(--interactive-surface-primary-hover, #f5f7fa);
}

.Base__iUqlA:hover {
  --surface-color: var(--interactive-surface-primary-hover, #f5f7fa);
}

.Base__iUqlA:active {
  --border-color: var(--interactive-active, #1c3abb);
}

.Base__iUqlA::-moz-placeholder {
  color: var(--placeholder-color);
}

.Base__iUqlA::placeholder {
  color: var(--placeholder-color);
}

.Base__iUqlA:disabled,
.disabled__FTNVe,
.disabled__FTNVe:hover,
.disabled__FTNVe:active,
.disabled__FTNVe:focus-visible,
.Base__iUqlA:hover .disabled__FTNVe {
  --border-color: var(--interactive-disabled, #eaecf0);
  --surface-color: var(--interactive-surface-disabled, #f1f3f6);
  --font-color: var(--content-disabled, #9a9eaa);
  -webkit-text-fill-color: var(--content-disabled, #9a9eaa);
  /* override Safari disabled input font color */
  cursor: not-allowed;
  outline: none;
}

@supports not selector(:focus-visible) {
  .Base__iUqlA:focus {
    outline: var(--focus);
  }

  .borderless__6cr-3:focus {
    outline: none;
  }
}

.baseLineHeight__-JUTS {
  line-height: 1;
}

.wrapper__qkcx5 {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 1rem;
}

.wrapper__qkcx5:hover .Base__iUqlA:not(:disabled):not(.disabled__FTNVe) {
  --surface-color: var(--interactive-surface-primary-hover, #f5f7fa);
}

/* Override the wrapper focus style when underline is used in InputWrapper */
/* :has selector requires modern browsers (widely supported since 2022) and may not work in older versions */
@supports selector(:has(*)) {
  .wrapper__qkcx5:has(:is(.Base__iUqlA):focus):focus-within {
    outline: var(--focus);
  }

  .wrapper__qkcx5:is(.underline__-k8n2):has(:is(.Base__iUqlA):focus):focus-within:not(.disabled__FTNVe) {
    outline: none;
    --border-color: var(--interactive-focus, #86afff);
  }

  .wrapper__qkcx5:is(.underline__-k8n2):has(:is(.Base__iUqlA):active):not(.disabled__FTNVe):active {
    outline: none;
    --border-color: var(--interactive-active, #1c3abb);
  }
}

.shrink__Zoj2j {
  gap: 0;
}

.bezel__3WJlH {
  padding-inline: 1rem;
}

/** size classes */

.lFont__vnnwV {
  --font: var(
    --text-regular-L,
    500 1.125rem/1.618 Maison Neue,
    Helvetica,
    Open Sans,
    sans-serif
  );
}

.lEmphasize__HUXd3 {
  --font: var(
    --heading-2XL,
    600 2.5rem/1.5 Maison Neue,
    Helvetica,
    Open Sans,
    sans-serif
  );
}

.lSize__ZAxqS {
  padding: 1.1875rem 1rem;
  max-height: 56px;
}

.wrapper__qkcx5 > .lSize__ZAxqS {
  max-height: 54px;
}

.mFont__LDr6S {
  --font: var(
    --text-regular-M,
    500 1rem/1.618 Maison Neue,
    Helvetica,
    Open Sans,
    sans-serif
  );
}

.mEmphasize__OZ-Ou {
  --font: var(
    --heading-XL,
    600 2.25rem/1.5 Maison Neue,
    Helvetica,
    Open Sans,
    sans-serif
  );
}

.mSize__yn6oo {
  padding: 1rem 1rem;
  max-height: 48px;
}

.wrapper__qkcx5 > .mSize__yn6oo {
  max-height: 46px;
}

.sFont__a0yJl {
  --font: var(
    --text-regular-S,
    500 0.875rem/1.618 Maison Neue,
    Helvetica,
    Open Sans,
    sans-serif
  );
}

.sEmphasize__a7YXO {
  --font: var(
    --heading-L,
    600 2rem/1.5 Maison Neue,
    Helvetica,
    Open Sans,
    sans-serif
  );
}

.sSize__nOg4a {
  padding: 0.8125rem 1rem;
  max-height: 40px;
}

.inputXs__Jyc1b {
  margin: -0.6875rem 0;
}

.wrapper__qkcx5 > .sSize__nOg4a {
  max-height: 38px;
}

.xsFont__ZoXFc {
  --font: var(
    --text-regular-S,
    500 0.875rem/1.618 Maison Neue,
    Helvetica,
    Open Sans,
    sans-serif
  );
}

.xsEmphasize__AanPE {
  --font: var(
    --heading-M,
    600 1.75rem/1.5 Maison Neue,
    Helvetica,
    Open Sans,
    sans-serif
  );
}

.xsSize__WjaAR {
  padding: 0.6875rem 1rem;
  max-height: 36px;
}

.wrapper__qkcx5 > .xsSize__WjaAR {
  max-height: 34px;
}

.borderless__6cr-3 {
  border: none;
  outline: none;
}

.borderless__6cr-3:focus-visible {
  outline: none;
}

.bezelless__XoxCA {
  padding-left: 0;
  padding-right: 0;
}

.invalid__u91uf {
  border-color: var(--interactive-invalid, #ec4453);
  /* firefox gives default box-shadow for invalid inputs */
  box-shadow: none;
}

.stretch__0iX7B {
  width: 100%;
  min-width: unset;
  grid-template-columns: auto 1fr;
}

.stretchQualifierEnd__UOR-y {
  width: 100%;
  min-width: unset;
  grid-template-columns: 1fr auto;
}

.multiline__DunvT {
  --border-radius: var(--roundness-user-input-L, 0.375rem);
  padding: 1rem;
  max-height: initial;
  height: var(--extent);
}

.extentLow__oeiSb {
  --extent: 76px;
}

.extentMid__6-yRR {
  --extent: 92px;
}

.extentHigh__gcgQv {
  --extent: 108px;
}

.resizeHorizontal__27RH8 {
  resize: horizontal;
}

.resizeVertical__DTfPJ {
  resize: vertical;
}

/* Nude variant */

.nude__tD2IN,
.nude__tD2IN:disabled,
.nude__tD2IN.disabled__FTNVe {
  --surface-color: transparent;
}

/* Underline variant — includes input states when not wrapped by InputWrapper */
.underline__-k8n2 {
  --border-radius: var(--roundness-sharp, 0rem);

  border: none;
  border-bottom: 1px solid var(--border-color);
}

.underline__-k8n2:focus-visible {
  outline: none;
  --border-color: var(--interactive-focus, #86afff);
}

.underline__-k8n2:active {
  outline: none;
  --border-color: var(--interactive-active, #1c3abb);
}

.underline__-k8n2:is(.invalid__u91uf) {
  outline: none;
  --border-color: var(--interactive-invalid, #ec4453);
}

.underline__-k8n2:disabled,
.underline__-k8n2:is(.disabled__FTNVe) {
  --border-color: var(--interactive-disabled, #eaecf0);
}

.InputQualifier__5LCOT {
  --textqualifier-font: var(
    --text-bold-M,
    600 1rem/1.5 Maison Neue,
    Helvetica,
    Open Sans,
    sans-serif
  );
  font: var(--textqualifier-font);
  display: inline-flex;
}

.xs__5KVXH {
  --textqualifier-font: var(
    --text-bold-S,
    600 0.875rem/1.5 Maison Neue,
    Helvetica,
    Open Sans,
    sans-serif
  );
}

.s__xzCFp {
  --textqualifier-font: var(
    --text-bold-S,
    600 0.875rem/1.5 Maison Neue,
    Helvetica,
    Open Sans,
    sans-serif
  );
}

.m__RqDhk {
  --textqualifier-font: var(
    --text-bold-M,
    600 1rem/1.5 Maison Neue,
    Helvetica,
    Open Sans,
    sans-serif
  );
}

.l__oB01O {
  --textqualifier-font: var(
    --text-bold-M,
    600 1rem/1.5 Maison Neue,
    Helvetica,
    Open Sans,
    sans-serif
  );
}

.inputAddon__PUhHt {
  display: grid;
  grid-auto-flow: column;
  position: relative;
  gap: 0.5rem;
}

.l__5cbH7 {
  letter-spacing: 0.36rem;
}

.m__CrGBV {
  letter-spacing: 0.36rem;
}

.s__0an6o {
  letter-spacing: 0.34rem;
}

.xs__eNtOr {
  letter-spacing: 0.34rem;
}

.alignCenter__LI5B8 {
  text-align: center;
}

.PhoneNumber__lQ0l- {
  position: relative;
  box-sizing: border-box;
  width: 320px;
  --list-max-height-s: 220px;
  --list-max-height-m: 264px;
  --list-max-height-l: 308px;
}

.stretch__VeDDp {
  width: 100%;
}

.selectionButton__qJWws {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: default;
  box-sizing: border-box;
  position: relative;
}

.selectionButton__qJWws.s__B36si {
  padding: 0.8125rem 0;
  max-height: 40px;
}

.selectionButton__qJWws.m__Qh-1M {
  padding: 1rem 0;
  max-height: 48px;
}

.selectionButton__qJWws.l__9PoJk {
  padding: 1.1875rem 0;
  max-height: 56px;
}

.emptyState__XuFRx {
  display: flex;
  color: var(--content-muted, #8e919b);
  padding: 0.1rem 0.75rem;
  width: 100%;
  box-sizing: border-box;
}

.listWrapper__bDHd3 {
  display: grid;
  grid-auto-flow: row;
  overflow-y: auto;
  padding: 0.75rem;
  gap: 0.25rem;
}

.listWrapper__bDHd3.s__B36si {
  max-height: var(--list-max-height-s);
}

.listWrapper__bDHd3.m__Qh-1M {
  max-height: var(--list-max-height-m);
}

.listWrapper__bDHd3.l__9PoJk {
  max-height: var(--list-max-height-l);
}

.separator__US34E {
  width: 1px;
  height: 20px;
  margin: auto;
  background-color: var(--interactive-default, #cbcfd7);
}

.withFlag__vzw0H {
  display: inline-flex;
  gap: 0.5rem;
}

.popoverSearch__O0de5 {
  padding: 0.75rem;
}

.emptyResult__a2Qgz {
  display: grid;
  justify-items: center;
  align-content: center;
  text-align: center;
  gap: 0.5rem;
  color: var(--content-secondary, #4f515c);
}

.emptyResult__a2Qgz.s__B36si {
  font: var(
    --text-regular-S,
    500 0.875rem/1.618 Maison Neue,
    Helvetica,
    Open Sans,
    sans-serif
  );
  height: var(--list-max-height-s);
}

.emptyResult__a2Qgz.m__Qh-1M {
  font: var(
    --text-regular-M,
    500 1rem/1.618 Maison Neue,
    Helvetica,
    Open Sans,
    sans-serif
  );
  height: var(--list-max-height-m);
}

.emptyResult__a2Qgz.l__9PoJk {
  font: var(
    --text-regular-L,
    500 1.125rem/1.618 Maison Neue,
    Helvetica,
    Open Sans,
    sans-serif
  );
  height: var(--list-max-height-l);
}

input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

.defaultText__NkUnZ {
  font: var(--default-font);
}

.defaultText__NkUnZ.s__B36si {
  --default-font: var(
    --text-bold-S,
    600 0.875rem/1.5 Maison Neue,
    Helvetica,
    Open Sans,
    sans-serif
  );
}

.defaultText__NkUnZ.m__Qh-1M {
  --default-font: var(
    --text-bold-M,
    600 1rem/1.5 Maison Neue,
    Helvetica,
    Open Sans,
    sans-serif
  );
}

.defaultText__NkUnZ.l__9PoJk {
  --default-font: var(
    --text-bold-L,
    600 1.125rem/1.5 Maison Neue,
    Helvetica,
    Open Sans,
    sans-serif
  );
}

.gap__35PGC {
  margin-left: 0.5rem;
}

.Hero__etTPZ {
  /* default custom properties */
  --surface-color: var(--interactive-surface-secondary-default, #e9eef3);
  --font-color: var(--content-primary, #2d2e34);
  --placeholder-color: var(--content-muted, #8e919b);
  --border-radius: var(--roundness-user-input-L, 0.375rem);
  --focus-appearance: var(--focus-outline, 2px solid);
  --focus-color: var(--interactive-focus, #86afff);
  --focus: var(--focus-appearance) var(--focus-color);
  --max-height: 0px;

  background: var(--surface-color);
  border: none;
  border-radius: var(--border-radius);
  color: var(--font-color);
  box-sizing: border-box;
  min-width: 160px;
  box-shadow: inset var(--shadow-deboss-mid-top, 0px 4px 4px 0px #1e2c6a0a);
  padding-inline: 1rem;
  height: var(--max-height);
  align-items: center;
}

.invalid__iCVH2 {
  border: 1px solid var(--interactive-invalid, #ec4453);
  /* firefox gives default box-shadow for invalid inputs */
  box-shadow: none;
}

.field__z4A-v {
  border: none;
  background: transparent;
  font: var(--font);
  box-sizing: border-box;
  border-radius: 0;
  line-height: 1;
}

.field__z4A-v:focus {
  outline: none;
}

.stretch__UXIpf {
  width: 100%;
  min-width: unset;
}

.wrapper__mlBpA {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
}

.wrapper__mlBpA:hover {
  outline: none;
  --surface-color: var(--interactive-surface-secondary-hover, #f4f7f9);
}

.wrapper__mlBpA:focus-within {
  outline: var(--focus);
}

.wrapper__mlBpA:active {
  outline: 1px solid var(--interactive-active, #1c3abb);
}

/* Sizes */
.sSize__xGp7Q {
  --font: var(
    --display-S,
    700 1.5rem/1.618 Maison Neue Extended,
    Helvetica,
    Open Sans,
    sans-serif
  );
  --max-height: 68px;
}

.mSize__BYBAl {
  --font: var(
    --display-M,
    700 1.75rem/1.618 Maison Neue Extended,
    Helvetica,
    Open Sans,
    sans-serif
  );
  --max-height: 72px;
}

.lSize__4Jv6L {
  --font: var(
    --display-L,
    700 2rem/1.618 Maison Neue Extended,
    Helvetica,
    Open Sans,
    sans-serif
  );
  --max-height: 76px;
}

/* Label */
.sLabel__BRCpK {
  --label-font: var(
    --text-regular-XS,
    500 0.75rem/1.618 Maison Neue,
    Helvetica,
    Open Sans,
    sans-serif
  );
}

.mSize__BYBAl {
  --label-font: var(
    --text-regular-S,
    500 0.875rem/1.618 Maison Neue,
    Helvetica,
    Open Sans,
    sans-serif
  );
}

.lSize__4Jv6L {
  --label-font: var(
    --text-regular-M,
    500 1rem/1.618 Maison Neue,
    Helvetica,
    Open Sans,
    sans-serif
  );
}

/* Alignments */
.leftAlign__05bf5 {
  text-align: left;
  justify-content: left;
}

.centerAlign__9fVAQ {
  text-align: center;
  justify-content: center;
}

.rightAlign__nPQ-c {
  text-align: right;
  justify-content: right;
}

.labelContainer__Pq2dA {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.label__Yk65T {
  color: var(--content-muted, #8e919b);
  font: var(--label-font);
}

.disabled__Q4oAU,
.disabled__Q4oAU:hover,
.disabled__Q4oAU:active,
.disabled__Q4oAU:focus-visible {
  --surface-color: var(--interactive-surface-disabled, #f1f3f6);
  --font-color: var(--content-disabled, #9a9eaa);
  -webkit-text-fill-color: var(--content-disabled, #9a9eaa);
  /* override Safari disabled input font color */
  cursor: not-allowed;
  outline: none;
}