.form-row {
    display: flex;
    flex-wrap: nowrap;
}

input:focus {
    outline: none;
}

input:user-invalid {
    border-color: var(--color-negative);
}

input:focus {
    border-color: var(--color-main);
}

.label {
    display: inline-block;
    padding-left: var(--size-xs);
    padding-bottom: var(--size-xxs);
    font-size: 0.8em;
}

.input {
    border: var(--input-border-width) solid var(--input-border-color);
    font-size: 1em;
    font-family: inherit;
    border-radius: var(--input-border-radius);
    padding: var(--size-rxxs) var(--size-rxs);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    transition: border-color var(--base-transition), transform var(--base-transition), box-shadow var(--base-transition);
}
.input:focus {
    transform: translateY(calc(-1*var(--size-rxxxs)));
    box-shadow: var(--elevation-1);
}

.logo--blik {
    height: 3.75em;
}

.input--blik {
    font-size: 2em;
}

.checkbox {
    display: inline-block;
    appearance: none;
    position: relative;
    vertical-align: baseline;
    margin-right: var(--size-xxs);
    box-sizing: border-box;
    width: 1em;
    height: 1em;
    color: var(--color-main);
    border: var(--input-border-width) solid var(--input-border-color);
    border-radius: var(--size-rxxs);
    top: var(--size-xxxs);
}

.checkbox:after {
    visibility: hidden;
    content: url('/svg/check.svg');
    width: 0.75em;
    height: 0.75em;
    position: absolute;
    top: calc(-1 * var(--size-xxxs));
    left: 0;
}

.checkbox:checked {
    content: '';
    background-color: var(--color-background);
}

.checkbox:user-invalid {
    border-color: var(--color-negative);
}

.checkbox:focus {
    border-color: var(--color-main);
}

.checkbox:checked:after {
    visibility: visible;
}

.button {
    display: inline-block;
    appearance: none;
    border: none;
    border-radius: var(--button-border-radius);
    padding: var(--size-xs) var(--size-m);
    font-size: 1em;
    font-family: inherit;
    font-weight: var(--font-weight-normal);
    text-decoration: none;
    cursor: pointer;
    background-color: var(--button-background);
    color: var(--button-color);
    transition: background-color var(--base-transition), transform var(--base-transition), box-shadow var(--base-transition);
}

.button:hover {
    background-color: var(--button-background-hover);
    transform: translateY(calc(-1*var(--size-rxxxs)));
    box-shadow: var(--elevation-1);
}

.button--info {
    --button-background: var(--color-info);
    --button-background-hover: color-mix(in srgb, var(--color-info), var(--color-info--light) 40%);

}