/**
 * TextField 组件样式 - 100% 一比一复刻 MUI
 * 对应 MUI: packages/mui-material/src/TextField/TextField.js
 */

/* =============================================
   Root 基础样式
   ============================================= */
.MuiTextField-root {
  display: inline-flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
  vertical-align: top;
}

.MuiTextField-fullWidth {
  width: 100%;
}

/* =============================================
   边距变体
   ============================================= */
.MuiTextField-marginDense {
  margin-top: 8px;
  margin-bottom: 4px;
}

.MuiTextField-marginNormal {
  margin-top: 16px;
  margin-bottom: 8px;
}

/* =============================================
   InputLabel 样式
   ============================================= */
.MuiInputLabel-root {
  display: block;
  transform-origin: top left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(14px, 16px) scale(1);
  transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,
              transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,
              max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
  color: rgba(0, 0, 0, 0.6);
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.4375em;
  letter-spacing: 0.00938em;
  padding: 0;
  pointer-events: none;
  z-index: 1;
}

.MuiInputLabel-text {
  display: inline;
}

.MuiInputLabel-asterisk {
  color: #d32f2f;
}

/* Outlined 标签 */
.MuiInputLabel-outlined {
  transform: translate(14px, 16px) scale(1);
}

.MuiInputLabel-outlined.Mui-focused,
.MuiInputLabel-outlined.MuiInputLabel-shrink {
  transform: translate(14px, -9px) scale(0.75);
  max-width: calc(133% - 24px);
}

/* Filled 标签 */
.MuiInputLabel-filled {
  transform: translate(12px, 16px) scale(1);
}

.MuiInputLabel-filled.Mui-focused,
.MuiInputLabel-filled.MuiInputLabel-shrink {
  transform: translate(12px, 7px) scale(0.75);
}

/* Standard 标签 */
.MuiInputLabel-standard {
  transform: translate(0, 20px) scale(1);
}

.MuiInputLabel-standard.Mui-focused,
.MuiInputLabel-standard.MuiInputLabel-shrink {
  transform: translate(0, -1.5px) scale(0.75);
}

/* 尺寸变体 */
.MuiInputLabel-sizeSmall {
  transform: translate(14px, 9px) scale(1);
}

.MuiInputLabel-sizeSmall.Mui-focused,
.MuiInputLabel-sizeSmall.MuiInputLabel-shrink {
  transform: translate(14px, -9px) scale(0.75);
}

/* 状态 */
.MuiInputLabel-root.Mui-focused {
  color: #1976d2;
}

.MuiInputLabel-root.Mui-error {
  color: #d32f2f;
}

.MuiInputLabel-root.Mui-disabled {
  color: rgba(0, 0, 0, 0.38);
}

/* =============================================
   OutlinedInput 样式
   ============================================= */
.MuiOutlinedInput-root {
  position: relative;
  border-radius: 4px;
}

.MuiOutlinedInput-input {
  padding: 16.5px 14px;
  border: 0;
  background: transparent;
  outline: 0;
  font: inherit;
  width: 100%;
  box-sizing: border-box;
}

.MuiOutlinedInput-inputSizeSmall {
  padding: 8.5px 14px;
}

.MuiOutlinedInput-inputMultiline {
  padding: 0;
}

.MuiOutlinedInput-notchedOutline {
  position: absolute;
  top: -5px;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid rgba(0, 0, 0, 0.23);
  border-radius: inherit;
  pointer-events: none;
  overflow: hidden;
  padding: 0 8px;
}

.MuiOutlinedInput-notchedOutline.Mui-error {
  border-color: #d32f2f;
}

.MuiOutlinedInput-legend {
  float: unset;
  width: auto;
  overflow: hidden;
  display: block;
  padding: 0;
  height: 11px;
  font-size: 0.75em;
  visibility: hidden;
  max-width: 0.01px;
  transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
  white-space: nowrap;
}

/* 聚焦时边框 */
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: #1976d2;
  border-width: 2px;
}

.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-legend {
  max-width: 100%;
}

/* =============================================
   FilledInput 样式
   ============================================= */
.MuiFilledInput-root {
  position: relative;
  background-color: rgba(0, 0, 0, 0.06);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  transition: background-color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
}

.MuiFilledInput-input {
  padding: 25px 12px 8px;
  border: 0;
  background: transparent;
  outline: 0;
  font: inherit;
  width: 100%;
  box-sizing: border-box;
}

.MuiFilledInput-inputSizeSmall {
  padding-top: 21px;
  padding-bottom: 4px;
}

.MuiFilledInput-underline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.42);
  transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.MuiFilledInput-root.Mui-focused .MuiFilledInput-underline {
  height: 2px;
  background-color: #1976d2;
}

/* =============================================
   FormHelperText 样式
   ============================================= */
.MuiFormHelperText-root {
  color: rgba(0, 0, 0, 0.6);
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.66;
  letter-spacing: 0.03333em;
  text-align: left;
  margin-top: 3px;
  margin-right: 14px;
  margin-bottom: 0;
  margin-left: 14px;
}

.MuiFormHelperText-text {
  display: inline;
}

.MuiFormHelperText-root.Mui-error {
  color: #d32f2f;
}

.MuiFormHelperText-root.Mui-disabled {
  color: rgba(0, 0, 0, 0.38);
}

.MuiFormHelperText-sizeSmall {
  margin-top: 4px;
}