@use "mixins" as *;

// =============== input styles =================

/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

.sln-input {
    @include input_default;
    &:hover {
        border: 1.4px solid var(--GRAY);
        border-radius: 4px;
    }
    &:active {
        color: var(--MIDLE-GRAY);
        border: 1.4px solid var(--MIDLE-GRAY);
        border-radius: 4px;
    }
    &:focus{
        border: 1.4px solid var(--PRIMARY);
    }
}
.sln-input-xs {
    min-height: calc(45px / 2);
    font-size: 12px !important;
}
.sln-input-s {
    min-height: calc(45px - 15px);
    font-size: 13px;
}
.sln-input-l {
    min-height: calc(45px + 15px);
    font-size: 17px !important;
}
.sln-input-xl {
    min-height: calc(45px * 2);
    font-size: 20px !important;
}