c-input .input-wrapper {
  border-radius: 0.3125rem;
  font-size: 0.875rem;
  color: var(--color-input-text);
  background-color: var(--color-input-bg);
  box-shadow: var(--color-input-border) 0rem 0rem 0rem 0.0625rem inset;
  display: flex;
  flex-grow: 1;
  align-items: center;
  position: relative;
}

/* focus */
c-input:focus-within .input-wrapper {
  box-shadow: var(--color-input-focus) 0rem 0rem 0rem 0.125rem inset;
  transition: box-shadow 0.3s;
}

/* size */
c-input.input-small .input-wrapper {
  font-size: 0.75rem;
  height: 1.75rem;
  padding-left: 0.3125rem;
  padding-right: 0.3125rem;
  max-width: 20rem;
}

c-input.input-middle .input-wrapper {
  font-size: 0.875rem;
  height: 2.25rem;
  padding-left: 0.4375rem;
  padding-right: 0.4375rem;
  max-width: 20rem;
}

c-input.input-large .input-wrapper {
  font-size: 1rem;
  height: 2.625rem;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  max-width: 20rem;
}

/* caption */
c-input .caption {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 0.3125rem;
  font-size: 0.875rem;
}

c-input .hint {
  display: inline-block;
  color: var(--color-input-hint-text);
  font-weight: 500;
  font-size: 12px;
  display: flex;
  align-items: center;
}

c-input.input-error .input-wrapper {
  box-shadow: var(--color-input-error-border) 0px 0px 0px 1px inset;
}

c-input:focus-within.input-error .input-wrapper {
  box-shadow: var(--color-input-error-border) 0px 0px 0px 2px inset;
}

c-input .error {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.1875rem;
  color: var(--color-input-error-text);
  font-size: 12px;
  font-weight: 500;
}

c-input .error-icon {
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 -960 960 960" width="18"><path d="M479.945-271.869q19.925 0 33.457-13.479 13.533-13.478 13.533-33.402t-13.478-33.576q-13.478-13.652-33.402-13.652-19.925 0-33.457 13.652-13.533 13.652-13.533 33.576t13.478 33.402q13.478 13.479 33.402 13.479ZM480-439.522q19.152 0 32.326-13.174t13.174-32.326v-154.5q0-19.152-13.174-32.326T480-685.022q-19.152 0-32.326 13.174T434.5-639.522v154.5q0 19.152 13.174 32.326T480-439.522Zm0 367.653q-84.913 0-159.345-32.118t-129.491-87.177q-55.059-55.059-87.177-129.491Q71.869-395.087 71.869-480t32.118-159.345q32.118-74.432 87.177-129.491 55.059-55.059 129.491-87.177Q395.087-888.131 480-888.131t159.345 32.118q74.432 32.118 129.491 87.177 55.059 55.059 87.177 129.491Q888.131-564.913 888.131-480t-32.118 159.345q-32.118 74.432-87.177 129.491-55.059 55.059-129.491 87.177Q564.913-71.869 480-71.869Z"/></svg>');
  background-repeat: no-repeat;
  background-color: var(--color-input-error-text);
  width: 1.125rem;
  height: 1.125rem;
}

c-input.input-success .input-wrapper {
  box-shadow: var(--color-input-success-border) 0px 0px 0px 1px inset;
}

c-input:focus-within.input-success .input-wrapper {
  box-shadow: var(--color-input-success-border) 0px 0px 0px 2px inset;
}

c-input .success-icon {
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 -960 960 960"><path d="M423.283-416.37 343.5-496.152q-12.435-12.435-31.348-12.435-18.913 0-31.348 12.435-12.434 12.435-12.315 31.348.12 18.913 12.554 31.348l110.174 110.173q13.761 13.674 32.109 13.674 18.348 0 32.022-13.674l222.413-222.413q12.435-12.434 12.435-31.228 0-18.793-12.435-31.228-12.435-12.435-31.348-12.435-18.913 0-31.348 12.435L423.283-416.37ZM480-71.87q-84.913 0-159.345-32.117-74.432-32.118-129.491-87.177-55.059-55.059-87.177-129.491Q71.869-395.087 71.869-480t32.118-159.345q32.118-74.432 87.177-129.491 55.059-55.059 129.491-87.177Q395.087-888.131 480-888.131t159.345 32.118q74.432 32.118 129.491 87.177 55.059 55.059 87.177 129.491Q888.131-564.913 888.131-480t-32.118 159.345q-32.118 74.432-87.177 129.491-55.059 55.059-129.491 87.177Q564.913-71.869 480-71.869Z"/></svg>');
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--color-input-success-text);
  width: 1.125rem;
  height: 1.125rem;
}

c-input .success {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.1875rem;
  color: var(--color-input-success-text);
  font-size: 12px;
  font-weight: 500;
}

/* native input */
c-input input {
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-decoration: inherit;
  text-indent: inherit;
  text-overflow: inherit;
  text-transform: inherit;
  text-align: inherit;
  white-space: inherit;
  color: inherit;
  display: inline-block;
  position: relative;
  -ms-flex: 1;
  flex: 1;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  border: 0;
  outline: none;
  background: transparent;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  z-index: 1;
}

input::placeholder {
  color: var(--color-input-placeholder);
}