/* -------------------------------------------
    Form
---------------------------------------------- */

.form-row [type="text"],
.form-row [type="tel"],
.form-row [type="password"],
.form-row [type="email"],
.form-row textarea,
.form-row .select2-container .select2-selection,
.form-row select {
    display: block;
    width: 100%;
    min-height: 4.4rem;
}

.form .form-control {
    margin-bottom: 2rem;
}

.form-control {
    display: block;
    width: 100%;
    min-height: 4rem;
    padding: 11px 2rem;
    border: 1px solid var(--alpha-change-border-color);
    font-size: var(--alpha-form-field-font-size);
    line-height: 1.5;
    font-weight: 400;
    color: var(--alpha-body-color);
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
    outline: 0;

    &::placeholder {
        opacity: .7;
        transition: opacity .3s;
    }

    &:focus::placeholder {
        opacity: 0;
    }

    &.form-solid {
        background-color: var(--alpha-change-color-light-1);
        border: 0;
        color: var(--alpha-body-color);
    }

    &[readonly="readonly"] {
        background: var(--alpha-change-color-light-2);
    }
}

textarea {
    font-family: inherit;
    min-width: 100%;
    max-width: 100%;
}

.custom-input {

    // CheckBox
    input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        -webkit-appearance: none;

        +label,
        +span {
            position: relative;
            padding-#{$left}: 1.85em;
            cursor: pointer;

            &::before {
                content: '';
                display: inline-block;
                position: absolute;
                top: 0;
                #{$left}: 0;
                width: 1.28em;
                height: 1.28em;
                border: 1px solid var(--alpha-change-color-light-3);
                border-radius: var(--alpha-corner-sm);

                @include only-for-ie() {
                    line-height: 14px;
                }
            }
        }

        &:checked+label::before,
        &:checked+span::before {
            content: '\f00c';
            border-color: #2f2f2f;
            background: #2f2f2f;
            color: var(--alpha-change-color-light-1);
            width: 2em;
            height: 2em;
            font-family: 'Font Awesome 5 Free';
            font-size: .64em;
            font-weight: 600;
            line-height: 2em;
            text-align: center;
        }
    }

    // Radio
    input[type="radio"] {
        position: absolute;
        opacity: 0;
        -webkit-appearance: none;
        z-index: -1;

        +label {
            position: relative;
            padding-#{$left}: 1.785em;
            display: block;
            cursor: pointer;

            &::after {
                position: absolute;
                content: '';
                display: inline-block;
                #{$left}: 0;
                width: 1.28em;
                height: 1.28em;
                margin-top: -1rem;
                border: 1px solid #cdcdcd;
                border-radius: 50%;
                top: 50%;
                cursor: pointer;
                //transition: color .3s, background-color .3s, content .3s;
            }
        }

        &:checked~label::after {
            background: var(--alpha-change-color-light-1);
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%2333'/%3e%3c/svg%3e");
            padding-#{$left}: 2px;
        }
    }
}

input[type="checkbox"],
input[type="radio"] {
    margin-inline-end: .5rem;
    width: 1.28em;
    height: 1.28em;
    vertical-align: middle;
    appearance: none;
    color-adjust: exact; // Keep themed appearance for print
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid var(--alpha-change-color-light-3);
    font-size: inherit;
    transition: background-color .35s, border-color .35s;
    cursor: pointer;
}

input[type="checkbox"],
input[type="radio"],
input[type=email],
input[type=password],
input[type=tel],
input[type=text],
input[type=url],
input[type=number],
input[type=date],
select,
textarea,
textarea.form-control {
    transition: color .3s, border-color .3s, background-color .3s;

    &:focus {
        border-color: var(--alpha-form-field-focus-border-color);
    }
}

input[type="checkbox"] {
    border-radius: var(--alpha-border-radius);

    &:checked {
        background-color: #2f2f2f;
        border-color: #2f2f2f;
        color: var(--alpha-change-color-light-1);
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
    }
}

input[type="radio"] {
    border-radius: 50%;

    &:checked {
        background-color: var(--alpha-white-color);
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%2333'/%3e%3c/svg%3e")
    }
}

input[type="search"] {
    -webkit-appearance: textfield;

    &::-webkit-search-cancel-button,
    &::-webkit-search-decoration {
        -webkit-appearance: none;
    }
}


// Select Box
select {
    // updated (925)
    width: 100%;
    height: 40px;
    min-height: auto;
    margin: 0;
    border: 1px solid var(--alpha-form-field-border-color);
    border-width: var(--alpha-form-field-border-width);
    padding: var(--alpha-form-field-padding);
    border-radius: var(--alpha-border-radius);
    background-image: url(../images/select-bg.svg) !important;
    background-position: if-ltr(98%, 2%) 50% !important;
    background-size: 30px 60px !important;
    background-repeat: no-repeat !important;
    background-color: var(--alpha-form-field-bg-color);
    color: var(--alpha-form-field-color);
    cursor: pointer;
    appearance: none;
    font-size: var(--alpha-form-field-font-size);
}

.select-box {
    position: relative;
}

.select-box select {
    position: relative;
    max-width: 14rem;
    min-height: auto;
    width: auto;
    height: 100%;
    padding: side-values(8.5px 27px 8.5px 9px);
    color: inherit;
    background-color: transparent;
    font-size: 1.2rem;
    font-family: inherit;
    letter-spacing: inherit;
    z-index: 1;
    -moz-appearance: none;
    -webkit-appearance: none;

    &:focus {
        outline: none;
    }
}

@include only-for-ie() {
    select::-ms-expand {
        display: none
    }

    select:focus::-ms-value {
        background: transparent;
        color: currentColor
    }
}

span.select2-dropdown {
    border-color: var(--alpha-form-field-focus-border-color);
    border-radius: var(--alpha-border-radius);
    background: var(--alpha-change-color-light-1);
}

.select2-container .select2-selection {
    height: auto;
    background: transparent;
    line-height: 1.5;
    transition: color .3s, border-color 0.3s, background-color 0.3s;
}

.select2-container--default {
    .select2-selection--single {
        border-color: var(--alpha-form-field-border-color);
        border-radius: var(--alpha-border-radius);
    }

    .select2-search--dropdown .select2-search__field {
        border-radius: var(--alpha-border-radius);
        border-color: var(--alpha-form-field-focus-border-color);
    }
}

.select2-container--open .select2-selection--single {
    border-color: var(--alpha-form-field-focus-border-color);
}

.select2-container .select2-results__option[data-selected=true]:not(.select2-results__option--highlighted) {
    background: var(--alpha-change-color-light-2);

    &:hover {
        background: #0073aa;
    }
}

// Quantity
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.quantity {
    display: inline-flex;
    height: 4.5rem;
    border: 1px solid var(--alpha-change-border-color);
    border-radius: var(--alpha-border-radius);
    font-size: 1.4rem;
    font-weight: 700;

    .qty {
        -moz-appearance: textfield;
        padding: 0;
        color: var(--alpha-change-color-dark-1);
        border: solid var(--alpha-change-border-color);
        border-radius: 0;
        border-width: 0 1px;
        text-align: center;
        width: 3.8rem;
        font: inherit;
        letter-spacing: inherit;
        min-height: auto;

        &:focus {
            border-color: var(--alpha-change-border-color);
        }
    }

    button {
        // padding: 0;
        background: none;
        border: none;
        color: var(--alpha-change-color-dark-1);
        font-size: .93em;
        cursor: pointer;

        &:hover {
            color: var(--alpha-primary-color);
        }
    }

    form.cart & .qty {
        border-top-width: 0;
        border-bottom-width: 0;
    }
}

// Input Wrapper
.input-wrapper {
    input.form-control {
        flex: 1;
        min-width: 40px;
        font-size: 1.2rem;
    }
}

.input-wrapper-inline {
    display: flex;
    position: relative;
    max-width: 61.3rem;
    width: 100%;
    height: 40px;

    .btn {
        line-height: 1;
    }
}