.md-text-input-wrapper {
  position: relative;
  text-align: left;

  label {
    margin-bottom: 0.5rem;
    margin-left: 0.75rem;
    display: flex;
  }

  .md-text-input-container {
    background-color: var(--mds-color-theme-background-solid-primary-normal);
    border: 0.0625rem var(--md-globals-border-style-solid)
      var(--mds-color-theme-outline-input-normal);
    border-radius: 0.5rem;

    &:hover {
      background-color: var(--mds-color-theme-background-primary-hover);
      border-color: var(--mds-color-theme-outline-input-normal);

      input {
        color: var(--mds-color-theme-text-primary-normal);
      }
    }
  }

  input {
    width: calc(100% - 2rem);
    color: var(--mds-color-theme-text-primary-normal);
    outline: none;
    height: 2rem;
    box-sizing: border-box;
    box-shadow: none;
    background-color: transparent;
    border: 0;
    font-size: 1rem;
    padding-left: 0.75rem;

    // remove focus from input since focus ring is applied to parent div
    &:focus {
      background-color: transparent;
      outline: none;
      box-shadow: none;
    }

    &::placeholder {
      color: var(--mds-color-theme-text-secondary-normal);
      opacity: 1;
    }

    &::selection {
      color: var(--mds-color-theme-inverted-text-primary-normal);
      background-color: var(--mds-color-theme-background-accent-active);
    }

    &::-webkit-contacts-auto-fill-button {
      background-color: var(--mds-color-theme-text-secondary-normal);

      &:hover {
        background-color: var(--mds-color-theme-text-primary-normal);
      }

      &:active {
        background-color: var(--mds-color-theme-text-secondary-normal);
      }
    }

    &:-webkit-autofill,
    &:-webkit-autofill:hover,
    &:-webkit-autofill:focus,
    &:-webkit-autofill:active {
      -webkit-animation: autofill 0s forwards;
      animation: autofill 0s forwards;
      border-radius: 0.438rem 0 0 0.438rem;
    }

    @keyframes autofill {
      100% {
        background: transparent;
        color: inherit;
      }
    }

    @-webkit-keyframes autofill {
      100% {
        background: transparent;
        color: inherit;
      }
    }

    &:-webkit-autofill-strong-password {
      margin-top: 0.0625rem;
      margin-left: 0.0625rem;
      -webkit-box-shadow: 0 0 0 3.75rem #f9ffbd inset;
      box-shadow: 0 0 0 3.75rem #f9ffbd inset;
      border-radius: 0.375rem 0 0 0.375rem;
    }
  }

  &[data-level='error'] {
    .md-text-input-container {
      background-color: var(--mds-color-theme-background-alert-error-normal);
      border-color: var(--mds-color-theme-outline-cancel-normal);

      &:hover {
        background-color: var(--mds-color-theme-background-primary-hover);
        border-color: var(--mds-color-theme-outline-cancel-normal);
      }
    }
  }

  &[data-focus='true'] {
    .md-text-input-container {
      box-shadow: var(--md-globals-focus-ring-box-shadow);
    }
  }

  &[data-disabled='true'] {
    .md-text-input-container {
      background-color: var(--mds-color-theme-background-primary-disabled);
      border-color: var(--mds-color-theme-background-primary-disabled);

      input {
        color: var(--mds-color-theme-text-primary-disabled);
      }
    }
  }

  .md-text-input-help,
  .md-text-input-error {
    margin-left: 0.75rem;
    margin-top: 0.5rem;
  }

  .clear-icon {
    border: 0;
    background-color: transparent;
    cursor: pointer;
    position: absolute;
    color: var(--mds-color-theme-text-secondary-normal);
    display: inline-flex;
    height: 2rem;
    align-items: center;
    outline: none;
  }
}