html {
  box-sizing: border-box;
}

body {
  margin: 0;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  -webkit-tap-highlight-color: transparent;
}

:host {
  font-family: var(--c-font-family);
}

::-ms-reveal {
  display: none;
}

:root,
:host {
  /**
   * @prop --c-text-field-active-color: Active text field color
   * @prop --c-text-field-inactive-color: Inactive text field color
   * @prop --c-text-field-background-color: Inactive text field background color
   * @prop --c-text-field-text-color: Text field text color
   * @prop --c-text-field-placeholder-color:Text field placeholder color
   * @prop --c-text-field-shadow-active-color: Shadow text field active color
   * @prop --c-text-field-shadow-background-color: Shadow text field background color
   * @prop --c-text-field-shadow-text-color: Shadow text field text color
   * @prop --c-text-field-shadow-placeholder-color: Shadow text field placeholder color
   * @prop --c-text-field-label-color: Text field label color (works only with `label-on-top`)
   */
  --_c-text-field-active-color: var(--c-text-field-active-color, var(--c-primary-600));
  --_c-text-field-inactive-color: var(--c-text-field-inactive-color, var(--c-tertiary-600));
  --_c-text-field-background-color: var(--c-text-field-background-color, var(--c-transparent));
  --_c-text-field-text-color: var(--c-text-field-text-color, var(--c-text-body));
  --_c-text-field-placeholder-color: var(--c-text-field-placeholder-color, var(--c-tertiary-500));
  --_c-text-field-shadow-active-color: var(--c-text-field-shadow-active-color, var(--_c-text-field-active-color));
  --_c-text-field-shadow-background-color: var(--c-text-field-shadow-background-color, var(--c-white));
  --_c-text-field-shadow-text-color: var(--c-text-field-shadow-text-color, var(--_c-text-field-text-color));
  --_c-text-field-shadow-placeholder-color: var(--c-text-field-shadow-placeholder-color, var(--_c-text-field-placeholder-color));
  --_c-text-field-label-color: var(--c-text-field-label-color, var(--_c-text-field-text-color));
}

.c-input {
  --_c-input-active-color: var(--_c-text-field-active-color);
  --_c-input-inactive-color: var(--_c-text-field-inactive-color);
  --_c-input-background-color: var(--_c-text-field-background-color);
  --_c-input-text-color: var(--_c-text-field-text-color);
  --_c-input-label-color: var(--_c-text-field-label-color);
  --_c-input-placeholder-color: var(--_c-text-field-placeholder-color);
  --_c-input-shadow-active-color: var(--_c-text-field-shadow-active-color);
  --_c-input-shadow-background-color: var(--_c-text-field-shadow-background-color);
  --_c-input-shadow-text-color: var(--_c-text-field-shadow-text-color);
  --_c-input-shadow-placeholder-color: var(--_c-text-field-shadow-placeholder-color);
}
.c-input__password-toggle, .c-input__date-toggle {
  cursor: pointer;
  fill: currentColor;
  height: 22px;
  width: 22px;
}
.c-input__password-toggle--disabled, .c-input__date-toggle--disabled {
  cursor: not-allowed;
  fill: var(--c-tertiary-500);
}
.c-input input[type=date] {
  opacity: 0;
}
.c-input input[type=date]::-webkit-calendar-picker-indicator, .c-input input[type=date]::-webkit-inner-spin-button {
  display: none;
  appearance: none;
}
.c-input input[type=date]:focus, .c-input input[type=date].c-input__input--filled {
  opacity: 1;
}