form {
    tbody {
        background: transparent;
    }
}

input:not([type="radio"], [type="checkbox"], [type="number"], [type="submit"]),
textarea {
    $color: $color-gray-65;
    $color-border: $color-gray-25;

    color: $color;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid $color-border;
    padding: 0;
    transition: all $transition;

    &:hover, &:focus {
        $color: $black;
        $color-border: $black;

        color: $color;
        border-top: none;
        border-left: none;
        border-right: none;
        border-bottom: 1px solid $color-border;
    }

    .woocommerce-invalid & {
        $color: $alert-color;
        $color-image: str-replace(quote($color-gray-65), '#', '%23'); // Fix for IE and Firefox
        $color-border: $alert-color;
        color: $color;
        border-bottom: 1px solid $color-border;
    }

    @include breakpoint(large) {
        font-size: rem-calc(20);
    }
}

label {
    margin-bottom: 6px;
    @include breakpoint(large) {
        font-size: rem-calc(20);
    }
}

fieldset {
    border: none;
    padding: 0;
    margin: 0;
}


/**
 * Select
 */
select {
    $color: $color-gray-65;
    $color-image: str-replace(quote($color), '#', '%23'); // Fix for IE and Firefox
    $color-border: $color-gray-25;
    color: $color;
    border: none;
    border-bottom: 1px solid $color-border;
    border-radius: 0;
    width: 100%;
    height: rem-calc(38);
    margin: 0 0 1rem;
    padding: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.1 9.1"><path fill-rule="evenodd" fill="#{$color-image}" d="M752 10c.3 0 .5.1.7.3l6.4 6.4 6.4-6.4c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-7.1 7.1c-.4.4-1 .4-1.4 0l-7.1-7.1c-.4-.4-.4-1 0-1.4.2-.2.4-.3.7-.3z" transform="translate(-751 -10)"/></svg>');
    background-size: 18px;
    background-position: right;
    transition: all $transition;

    &:hover, &:focus {
        $color: $black;
        $color-image: str-replace(quote($color), '#', '%23'); // Fix for IE and Firefox
        $color-border: $black;
        color: $color;
        border: none;
        border-bottom: 1px solid $color-border;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.1 9.1"><path fill-rule="evenodd" fill="#{$color-image}" d="M752 10c.3 0 .5.1.7.3l6.4 6.4 6.4-6.4c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-7.1 7.1c-.4.4-1 .4-1.4 0l-7.1-7.1c-.4-.4-.4-1 0-1.4.2-.2.4-.3.7-.3z" transform="translate(-751 -10)"/></svg>');
        cursor: pointer;
    }

    &:focus {
        outline: none;
    }

    .woocommerce-invalid & {
        $color: $alert-color;
        $color-image: str-replace(quote($color-gray-65), '#', '%23'); // Fix for IE and Firefox
        $color-border: $alert-color;
        color: $color;
        border-bottom: 1px solid $color-border;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.1 9.1"><path fill-rule="evenodd" fill="#{$color-image}" d="M752 10c.3 0 .5.1.7.3l6.4 6.4 6.4-6.4c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-7.1 7.1c-.4.4-1 .4-1.4 0l-7.1-7.1c-.4-.4-.4-1 0-1.4.2-.2.4-.3.7-.3z" transform="translate(-751 -10)"/></svg>');
    }
}

/**
 * Select2
 */
.select2.select2-container.select2-container--default {

    &.select2-container--focus {
        outline: none !important;
    }
}
.select2-selection.select2-selection--single {
    border: none;
    border-radius: 0;
    width: 100%;
    height: rem-calc(38);
    margin: 0 0 1rem;

    .select2-selection__arrow {
        display: none;
    }
}
.select2-selection__rendered {
    $color: $color-gray-65;
    $color-icon: $color-gray-65;
    $color-border: $color-gray-25;
    color: $color !important;
    border-bottom: 1px solid $color-border;
    display: block;
    padding: 0 !important;
    position: relative;
    line-height: rem-calc(38) !important;
    transition: all $transition;
    &::after {
        @include add-arrow($color-icon);
        width: 18px;
        height: 18px;
        position: absolute;
        top: calc(50% + 4px);
        right: 0;
        transform: translateY(-50%) rotate(90deg);
        transition: all $transition;
    }

    &:hover, &:focus {
        $color: $black;
        $color-icon: $black;
        $color-border: $black;
        color: $color !important;
        border: none;
        border-bottom: 1px solid $color-border;
        cursor: pointer;
        &::after {
            @include add-arrow($color-icon);
            width: 18px;
            height: 18px;
        }
    }

    &:focus {
        outline: none !important;
    }
}


.select2-container.select2-container--default.select2-container--open {}
.select2-dropdown {
    border: 1px solid $black !important;
    border-radius: 0 !important;
    box-shadow: $shadow;
}
.select2-search.select2-search--dropdown {
    position: relative;
    &::after {
        // @include add-arrow();
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%) rotate(-90deg);
    }
}

.select2-results {}
.select2-results__options {}
.select2-search__field {}
.select2-results__option {
    &:focus {
        outline: none !important;
    }
}
.select2-results__option--highlighted {
    background-color: $color-gray-85 !important;
    &:focus {
        outline: none !important;
    }
}

.select2-container--default .select2-selection--single {
    background: transparent;
}


.form--submit-next-to-input {
    position: relative;

    .gform_body, .form__input--text {
    }
    .gform_footer, .form__input--submit {
        margin-top: 0;
        input[type="submit"] {
            display: block;
            width: 100%;
        }
    }
}
@include breakpoint(400) {
    .form--submit-next-to-input {
        justify-content: space-between;
        display: flex;
        @include clearfix;

        .validation_message {
            top: 8px;
        }

        .gform_body {
            width: 100%;
        }
        .gform_footer {
            width: 40%;
        }

        .gform_validation_error &,
        .gform_confirmation_wrapper & {
            flex-wrap: wrap;

            .validation_error {
                width: 100%;
            }

            .gform_body, .gform_footer {
                flex: 1;
            }

            .gform_body {
                flex: 0 0 70%;
            }
        }
    }
}
@include breakpoint(medium) {
    .form--submit-next-to-input {
        .gform_validation_error &,
        .gform_confirmation_wrapper & {
            .gform_body {
                flex: 0 0 60%;
            }
        }
    }
}
@include breakpoint(large) {
    .form--submit-next-to-input {
        .gform_validation_error &,
        .gform_confirmation_wrapper & {
            .gform_body {
                flex: 0 0 70%;
            }
        }
    }
}
