[data-component="input"] { width: 100%; [data-slot="input-input"] { width: 100%; color: var(--text-strong); /* text-14-regular */ font-family: var(--font-family-sans); font-size: var(--font-size-base); font-style: normal; font-weight: var(--font-weight-regular); line-height: var(--line-height-large); /* 142.857% */ letter-spacing: var(--letter-spacing-normal); &:focus { outline: none; } &::placeholder { color: var(--text-weak); } } &[data-variant="normal"] { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; [data-slot="input-label"] { color: var(--text-weak); /* text-12-medium */ font-family: var(--font-family-sans); font-size: var(--font-size-small); font-style: normal; font-weight: var(--font-weight-medium); line-height: 18px; /* 150% */ letter-spacing: var(--letter-spacing-normal); } [data-slot="input-wrapper"] { display: flex; align-items: start; justify-content: space-between; width: 100%; padding-right: 4px; border-radius: var(--radius-md); border: 1px solid var(--border-weak-base); background: var(--input-base); &:focus-within:not(:has([data-readonly])) { border-color: transparent; box-shadow: var(--shadow-xs-border-select); } &:has([data-invalid]) { background: var(--surface-critical-weak); border: 1px solid var(--border-critical-selected); } &:not(:has([data-slot="input-copy-button"])) { padding-right: 0; } } [data-slot="input-input"] { color: var(--text-strong); display: flex; height: 32px; padding: 2px 12px; align-items: center; flex: 1; min-width: 0; background: transparent; border: none; /* text-14-regular */ font-family: var(--font-family-sans); font-size: var(--font-size-base); font-style: normal; font-weight: var(--font-weight-regular); line-height: var(--line-height-large); /* 142.857% */ letter-spacing: var(--letter-spacing-normal); &:focus { outline: none; } &::placeholder { color: var(--text-weak); } } textarea[data-slot="input-input"] { height: auto; min-height: 32px; padding: 6px 12px; resize: none; } [data-slot="input-copy-button"] { flex-shrink: 0; margin-top: 4px; color: var(--icon-base); &:hover { color: var(--icon-strong-base); } } [data-slot="input-error"] { color: var(--text-on-critical-base); /* text-12-medium */ font-family: var(--font-family-sans); font-size: var(--font-size-small); font-style: normal; font-weight: var(--font-weight-medium); line-height: 18px; /* 150% */ letter-spacing: var(--letter-spacing-normal); } }}
[data-component="input"] {
width: 100%;
[data-slot="input-input"] {
width: 100%;
color: var(--text-strong);
/* text-14-regular */
font-family: var(--font-family-sans);
font-size: var(--font-size-base);
font-style: normal;
font-weight: var(--font-weight-regular);
line-height: var(--line-height-large); /* 142.857% */
letter-spacing: var(--letter-spacing-normal);
&:focus {
outline: none;
}
&::placeholder {
color: var(--text-weak);
}
}
&[data-variant="normal"] {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
[data-slot="input-label"] {
color: var(--text-weak);
/* text-12-medium */
font-family: var(--font-family-sans);
font-size: var(--font-size-small);
font-style: normal;
font-weight: var(--font-weight-medium);
line-height: 18px; /* 150% */
letter-spacing: var(--letter-spacing-normal);
}
[data-slot="input-wrapper"] {
display: flex;
align-items: start;
justify-content: space-between;
width: 100%;
padding-right: 4px;
border-radius: var(--radius-md);
border: 1px solid var(--border-weak-base);
background: var(--input-base);
&:focus-within:not(:has([data-readonly])) {
border-color: transparent;
box-shadow: var(--shadow-xs-border-select);
}
&:has([data-invalid]) {
background: var(--surface-critical-weak);
border: 1px solid var(--border-critical-selected);
}
&:not(:has([data-slot="input-copy-button"])) {
padding-right: 0;
}
}
[data-slot="input-input"] {
color: var(--text-strong);
display: flex;
height: 32px;
padding: 2px 12px;
align-items: center;
flex: 1;
min-width: 0;
background: transparent;
border: none;
/* text-14-regular */
font-family: var(--font-family-sans);
font-size: var(--font-size-base);
font-style: normal;
font-weight: var(--font-weight-regular);
line-height: var(--line-height-large); /* 142.857% */
letter-spacing: var(--letter-spacing-normal);
&:focus {
outline: none;
}
&::placeholder {
color: var(--text-weak);
}
}
textarea[data-slot="input-input"] {
height: auto;
min-height: 32px;
padding: 6px 12px;
resize: none;
}
[data-slot="input-copy-button"] {
flex-shrink: 0;
margin-top: 4px;
color: var(--icon-base);
&:hover {
color: var(--icon-strong-base);
}
}
[data-slot="input-error"] {
color: var(--text-on-critical-base);
/* text-12-medium */
font-family: var(--font-family-sans);
font-size: var(--font-size-small);
font-style: normal;
font-weight: var(--font-weight-medium);
line-height: 18px; /* 150% */
letter-spacing: var(--letter-spacing-normal);
}
}
}