input,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--lttrshop-text-color);
    -webkit-box-shadow: 0 0 0 var(--lttrshop-space-xl) var(--lttrshop-side-color) inset;
    box-shadow: 0 0 0 var(--lttrshop-space-xl) var(--lttrshop-side-color) inset;
    background-color: var(--lttrshop-side-color);
}

input:-webkit-autofill::first-line {
    font-size: var(--lttrshop-txt-s);
    font-weight: var(--lttrshop-line-s);
}

input:not([type=checkbox]),
select {
    border: var(--outline) solid var(--lttrshop-stroke-color);
    outline: var(--lttrshop-stroke-color);
    border-radius: var(--input-radius-xl);
    font-size: var(--lttrshop-txt-s);
    line-height: var(--lttrshop-line-s);
}

select,
select > option,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-box-shadow: 0 0 0 var(--lttrshop-space-l) var(--lttrshop-side-color) initial;
    box-shadow: 0 0 0 var(--lttrshop-space-l) var(--lttrshop-side-color) initial;
    background: var(--lttrshop-side-color) url("../media/select.svg") no-repeat right var(--lttrshop-space-xs) top 50%;
    background-size: var(--lttrshop-expand-arrow-size) var(--lttrshop-expand-arrow-size);
}

input[type=checkbox] {
    height: var(--checkbox-size);
    width: var(--checkbox-size);
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input[type=checkbox]::after {
    content: "";
    display: block;
    background: var(--lttrshop-side-color);
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    height: var(--checkbox-size);
    width: var(--checkbox-size);
    color: transparent;
    border-radius: var(--input-radius-l);
    line-height: var(--checkbox-size);
    border-width: var(--outline);
    border-style: solid;
    border-color: var(--lttrshop-stroke-color);
    accent-color: var(--lttrshop-highlight-color);
}

input[type=checkbox]:checked::after {
    content: "✓";
    font-family: var(--lttrshop-font-family-icons);
    font-weight: var(--lttrshop-font-weight-icons);
    text-align: center;
    -webkit-text-fill-color: var(--lttrshop-background-color);
    color: var(--lttrshop-background-color);
    /* do not set line-height, it should be the same as when non-checked */

    vertical-align: middle;
    font-size: var(--lttrshop-txt-icon);
}

input[type=checkbox]:disabled::after {
    opacity: var(--alpha);
}

input[type=checkbox]:checked::after,
.radio:checked::after {
    background-color: var(--lttrshop-highlight-color);
    border: none;
}