button,
.button {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing : antialiased;
    appearance             : none;
    /*  */
    display                : inline-flex;
    height                 : var(--size-xxl);
    margin                 : 0;
    padding                : 0 var(--size-lg);
    align-items            : center;
    justify-content        : center;
    box-shadow             : none;
    /*  */
    font-family            : var(--font-body);
    font-size              : var(--font-size-button);
    font-weight            : var(--font-weight-bold);
    line-height            : var(--size-lg);
    text-decoration        : none;
    color                  : var(--color-white);
    white-space            : nowrap;
    text-shadow            : none;
    /*  */
    cursor                 : pointer;
    outline                : 0;
    border                 : none;
    border-radius          : var(--size-xs);
    /*  */
    background-image       : none;
    background-color       : var(--color-bg-button);
    transition             : background-color 0.3s ease, transform 0.2s ease;
}

button:hover,
.button:hover {
    background-color: var(--color-bg-button-darker);
    /* transform       : scale(1.05); */
}

.button-outline {
    border          : 2px solid #b44b43;
    color           : var(--button-color);
    background-color: transparent;
}

.button-outline.secondary {
    border: 2px solid transparent;
}

input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
textarea {
    display         : flex;
    height          : var(--size-xxl);
    border-radius   : var(--radius-sm);
    padding         : 0 var(--size-md);
    margin          : 0;
    align-items     : center;
    /*  */
    font-family     : var(--font-body);
    font-size       : var(--font-size-button);
    font-weight     : var(--font-weight-bold);
    line-height     : var(--size-lg);
    height          : var(--size-xxl);
    color           : var(--color-text-body);
    min-width       : 50px;
    /*  */
    border          : 2px solid var(--color-grey-light);
    border-radius   : var(--size-xs);
    box-shadow      : none;
    /*  */
    background-color: var(--color-white);
}

input[required] {
    border-color: var(--color-grey-light);
}

::placeholder {
    text-transform: lowercase;
    color         : var(--color-grey-light);
}

:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    text-transform: lowercase;
}

::-ms-input-placeholder {
    /* Microsoft Edge */
    text-transform: lowercase;
}

input[type="text"].mini {
    padding    : var(--padding-field);
    font-size  : .9em;
    line-height: .9em;
    box-shadow : none;
    min-width  : 30px;
}

input:-webkit-autofill {
    -webkit-box-shadow: var(--shadow-webfix-button), 0 0 0 30px white inset;
    box-shadow        : var(--shadow-webfix-button), 0 0 0 30px white inset;
}

input.error,
.error {
    border-color: var(--color-red);
    padding     : var(--padding-field);
}

span:has(input.error)::after {
    display    : block;
    content    : attr(message);
    font-size  : 12px;
    font-family: var(--font-family-input);
    color      : #b84d27;
    padding    : var(--padding-field);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    background-clip: content-box;
}

textarea {
    max-width                  : 100%;
    min-height                 : 120px;
    line-height                : 1.5em;
    -webkit-tap-highlight-color: transparent;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
inputinput[type="text"]:focus,
select:focus,
textarea:focus {
    outline: 0;
}