div.m3.m3-text-field {
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  box-sizing: border-box;
  margin: 0;
}
div.m3.m3-text-field span.m3-icon.icon-before {
  align-self: start;
}
div.m3.m3-text-field:is(.filled, .outlined) > input::placeholder,
div.m3.m3-text-field > input,
div.m3.m3-text-field > label {
  line-height: var(--md-sys-typescale-body-large-line-height);
  font-size: var(--md-sys-typescale-body-large-font-size);
}
div.m3.m3-text-field + span.m3-text-field-supporting-text {
  display: flex;
  line-height: var(--md-sys-typescale-body-small-line-height);
  font-size: var(--md-sys-typescale-body-small-font-size);
  color: var(--md-sys-color-on-surface-variant);
  margin: 4px 16px 2px 16px;
}
div.m3.m3-text-field > label {
  padding-inline: 4px;
  pointer-events: none;
  transform: translate(16px, 0);
  transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
  position: absolute;
}
div.m3.m3-text-field > input {
  transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
  background-color: transparent;
  border: none;
}
div.m3.m3-text-field > span.m3-icon {
  position: absolute;
  align-self: end;
  margin: 12px;
  width: 24px;
  line-height: 24px;
  font-size: 24px;
  display: inherit;
  align-items: center;
  justify-content: inherit;
  cursor: pointer;
  color: var(--md-sys-color-on-surface-variant);
  font-family: Material-Symbols-Outlined-Regular, serif;
}
div.m3.m3-text-field > span.m3-text-field-state-layer {
  width: 100%;
  height: 100%;
  pointer-events: none;
  position: absolute;
}
div.m3.m3-text-field > input,
div.m3.m3-text-field > label {
  color: var(--md-sys-color-on-surface);
}
div.m3.m3-text-field:is(.filled, .outlined) > input::placeholder {
  color: var(--md-sys-color-on-surface-variant);
}
div.m3.m3-text-field:is(.filled, .outlined) > input:focus-visible {
  outline: none;
  caret-color: var(--md-sys-color-primary);
}
div.m3.m3-text-field:is(.filled, .outlined):has(input:disabled) > *,
div.m3.m3-text-field:is(.filled, .outlined):has(input:disabled)
  + span.m3-text-field-supporting-text {
  opacity: 38%;
}
div.m3.m3-text-field.filled {
  contain: content;
  border-radius: 4px 4px 0 0;
}
div.m3.m3-text-field.filled > input {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  border-radius: 4px 4px 0 0;
  background-color: var(--md-sys-color-surface-container-highest);
  box-shadow: inset 0 -1px 0 var(--md-sys-color-on-surface-variant);
}
div.m3.m3-text-field.filled > input.with-after-icon {
  padding: 24px 48px 8px 16px;
}
div.m3.m3-text-field.filled > input.with-before-icon {
  padding: 24px 16px 8px 48px;
}
div.m3.m3-text-field.filled > input.with-before-icon + label {
  margin-left: 32px;
}
div.m3.m3-text-field.filled > input:not(.with-after-icon, .with-before-icon) {
  padding: 24px 16px 8px;
}
div.m3.m3-text-field.filled > input.with-after-icon.with-before-icon {
  padding: 24px 48px 8px 48px;
}
div.m3.m3-text-field.filled > label.raised {
  transform: translate(12px, -12px);
  line-height: var(--md-sys-typescale-body-small-line-height);
  font-size: var(--md-sys-typescale-body-small-font-size);
}
div.m3.m3-text-field.filled > input:required:user-invalid {
  caret-color: var(--md-sys-color-error);
}
div.m3.m3-text-field.filled > input:required:user-invalid:focus-visible {
  box-shadow: inset 0 -3px 0 var(--md-sys-color-error);
}
div.m3.m3-text-field.filled > input:required:user-invalid {
  box-shadow: inset 0 -1px 0 var(--md-sys-color-error);
}
div.m3.m3-text-field.filled:has(input:required:user-invalid)
  > *:not(input):nth-last-child(-n + 3),
div.m3.m3-text-field.filled:has(input:required:user-invalid)
  + span.m3-text-field-supporting-text {
  color: var(--md-sys-color-error);
}
div.m3.m3-text-field.filled > input:focus-visible {
  outline-offset: 3px;
  box-shadow: inset 0 -3px 0 var(--md-sys-color-primary);
}
div.m3.m3-text-field.filled > input:focus-visible + label {
  color: var(--md-sys-color-primary);
}
div.m3.m3-text-field.filled:hover
  > input:not(:disabled)
  ~ span.m3-text-field-state-layer {
  transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-on-surface) 8%,
    transparent
  );
}
div.m3.m3-text-field.outlined > fieldset {
  margin: 0;
  position: absolute;
  border-radius: 4px;
  pointer-events: none;
  padding-inline: 12px;
  border: 1px solid var(--md-sys-color-outline);
  inset: -7.5px 0px 0px 0px;
  transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
}
div.m3.m3-text-field.outlined > fieldset > legend > span {
  width: 100%;
}
div.m3.m3-text-field.outlined > fieldset > legend {
  opacity: 0;
  width: 0;
  padding: 0;
  pointer-events: none;
  border: 0 solid transparent;
  transition: 0.05s cubic-bezier(0.2, 0, 0, 1);
}
div.m3.m3-text-field.outlined > fieldset > legend.raised {
  border-inline-width: 6px;
  border-style: solid;
  border-color: transparent;
  width: auto;
  visibility: visible;
}
div.m3.m3-text-field.outlined > input {
  box-sizing: border-box;
  border-radius: 4px;
}
div.m3.m3-text-field.outlined > input.with-after-icon {
  padding: 16px 48px 16px 16px;
}
div.m3.m3-text-field.outlined > input.with-before-icon {
  padding: 16px 16px 16px 48px;
}
div.m3.m3-text-field.outlined > input.with-before-icon + label {
  transform: translate(48px, 0);
}
div.m3.m3-text-field.outlined > input:not(.with-after-icon, .with-before-icon) {
  padding: 16px;
}
div.m3.m3-text-field.outlined > input.with-after-icon.with-before-icon {
  padding: 16px 48px;
}
div.m3.m3-text-field.outlined:has(input:focus-visible) > fieldset {
  border: 3px solid var(--md-sys-color-primary);
}
div.m3.m3-text-field.outlined:not(
    div.m3.m3-text-field.outlined:has(label.raised)
  ):has(input:focus-visible)
  > fieldset
  > legend {
  border-top-width: 0;
  border-bottom-width: 0;
  border-inline-width: 5.5px;
  border-style: solid;
  border-color: transparent;
}
div.m3.m3-text-field.outlined:not(
    div.m3.m3-text-field.outlined:has(input:focus-visible)
  ):has(label.raised)
  > fieldset
  > legend {
  border-top-width: 0;
  border-bottom-width: 0;
  border-inline-width: 7.5px;
  border-style: solid;
  border-color: transparent;
}
div.m3.m3-text-field.outlined > input:focus-visible + label {
  color: var(--md-sys-color-primary);
}
div.m3.m3-text-field.outlined > label.raised,
div.m3.m3-text-field.outlined > fieldset > * {
  line-height: var(--md-sys-typescale-body-small-line-height);
  font-size: var(--md-sys-typescale-body-small-font-size);
}
div.m3.m3-text-field.outlined > label.raised {
  transform: translate(16px, -27px) !important;
}
div.m3.m3-text-field.outlined > input:required:user-invalid {
  caret-color: var(--md-sys-color-error);
}
div.m3.m3-text-field.outlined:has(input:required:user-invalid)
  > *:not(input):nth-last-child(-n + 3),
div.m3.m3-text-field.outlined:has(input:required:user-invalid)
  + span.m3-text-field-supporting-text {
  color: var(--md-sys-color-error);
}
div.m3.m3-text-field.outlined:has(input:required:user-invalid) > fieldset {
  border: 3px solid var(--md-sys-color-error);
}
div.m3.m3-text-field.outlined:has(
    input:required:user-invalid:not(:focus-visible)
  )
  > fieldset {
  border: 1px solid var(--md-sys-color-error);
}
div.m3.m3-text-field.outlined:hover:not(
    div.m3.m3-text-field.outlined:hover:has(
        input:disabled,
        input:focus-visible,
        label.raised,
        input:required:user-invalid
      )
  )
  > fieldset {
  transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
  border-color: var(--md-sys-color-on-surface);
}

/*# sourceMappingURL=text-field.css.map */
