qs-text-input {
    --input-colour: var(--border-colour);
    display: grid;
    grid-template-columns: min-content minmax(0, 1fr);
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    width: max-content;
    height: max-content;
    margin: 0 auto;
    &:focus-within {
        box-shadow: 0 0 2px 1px var(--primary-accent-colour);
    }
    &:focus-within input:focus-visible {
        box-shadow: none;
        margin: 0;
    }
    & input{
        min-width: 0;
        margin: 0;
        padding: 0 22px;
        line-height: calc(2.65em - 2px);
        font-size: var(--font-size-step-1);
        font-weight: 700;
        border: 1px solid var(--input-colour, var(--border-colour));
        border-radius: var(--border-radius);
        &:focus-visible {
            outline: none;
            box-shadow: 0 0 2px 1px var(--primary-accent-colour);
            margin: 0 2px;
        }
    }
    & span {
        display: grid;
        place-items: center;
        font-size: var(--font-size-step-1);
        font-weight: 400;
        height: 2.65em;
        min-width: 48px;
        padding: 0 15px;
        border: 1px solid var(--input-colour, var(--border-colour));
        background-color: var(--input-colour);
        border-radius: var(--border-radius) 0 0 var(--border-radius);
        & + input {
            border-radius: 0 var(--border-radius) var(--border-radius) 0;
        }
    }
}