:root {
    --line-width: 2px;
    --line-color: black;

    --color: black;
    --background: white;

    --color-hover: white;
    --background-hover: #111;

    --font-family: 'Virgil', sans-serif;
}

* {
    box-sizing: border-box;
    min-width: 0;
}

@font-face {
    font-family: 'Virgil';
    src: url('https://salteadorneo.github.io/wireframes/fonts/Virgil.woff2') format('woff2'),
        url('https://salteadorneo.github.io/wireframes/fonts/Virgil.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

input {
    font-family: var(--font-family);
    color: var(--line-background, black);
    background: transparent;
    border-width: var(--line-width, 2px);
    border-style: solid;
    border-color: var(--line-color, black);
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
    padding: .5rem 1rem;
    outline: none;
    appearance: none;
    width: 100%;
    box-sizing: border-box;

    &.sm {
        font-size: .75rem;
        padding: .25rem .5rem;
    }

    &.lg {
        font-size: 1.25rem;
        padding: .75rem 1.5rem;
    }

    &.xl {
        font-size: 1.5rem;
        padding: 1rem 2rem;
    }
}