.md-code-input-wrapper {
  &:focus {
    box-shadow: none;
  }

  .md-code-input-container {
    height: 100%;
    width: 100%;

    &:focus {
      box-shadow: none;
    }

    .md-code-input-input {
      &:focus {
        box-shadow: none;
      }
    }

    .md-code-input-character {
      flex: auto;
      cursor: text;
      width: 2.75rem;
      height: 3rem;
      border: 1px solid var(--mds-color-theme-outline-input-normal);
      color: var(--mds-color-theme-text-primary-normal);
      background-color: var(--mds-color-theme-background-solid-primary-normal);
      box-sizing: border-box;
      border-radius: 0.5rem;
      font-size: 1.625rem;
      line-height: 3rem;

      &:not(:first-child) {
        margin-left: 0.5rem;
      }

      &:hover {
        border: 1px solid var(--mds-color-theme-outline-input-normal);
        color: var(--mds-color-theme-text-primary-normal);
        background-color: var(--mds-color-theme-background-primary-hover);
      }

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

      &--selected:empty {
        &:before {
          font-weight: 250;
          content: '|';
          animation: 1s blink step-end infinite;
        }

        border-color: var(--mds-color-theme-outline-theme-normal);
        color: var(--mds-color-theme-text-primary-normal);
        background-color: var(--mds-color-theme-background-primary-active);
      }
    }
  }

  @keyframes blink {
    from,
    to {
      color: transparent;
    }

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

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

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

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

  input:disabled ~ .md-code-input-container {
    .md-code-input-character {
      cursor: default;
      border-color: var(--mds-color-theme-background-primary-ghost);
      color: var(--mds-color-theme-text-primary-normal);
      background-color: var(--mds-color-theme-background-primary-disabled);
    }
  }

  .md-code-input-message {
    margin-top: 1rem;
  }
}