@use "../base/mixins";
@use "../base/variables";

//
// Forms
// --------------------------------------------------
// Normalize non-controls
//
// Restyle and baseline non-control form elements.

fieldset {
    padding: 0;
    margin: 0;
    border: 0;
    min-width: 0;
}

legend {
    display: block;
    width: 100%;
    padding: 0;
    line-height: inherit;
    border: 0;
}

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: bold;
}


// Normalize form controls
//
// While most of our form styles require extra classes, some basic normalization
// is required to ensure optimum display with or without those classes to better
// address browser inconsistencies.

// Override content-box in Normalize (* isn't specific enough)
input[type="search"] {
    box-sizing: border-box;
}

// Position radios and checkboxes better
input[type="radio"],
input[type="checkbox"] {
    margin: 4px 0 0;
    line-height: normal;
}

input[type="file"] {
    display: block;
}

// Make range inputs behave like textual form controls
input[type="range"] {
    display: block;
    width: 100%;
}

// Make multiple select elements height not fixed
select[multiple],
select[size] {
    height: auto;
}

// Common form controls
//
// Shared size and type resets for form controls. Apply `.form-control` to any
// of the following form controls:
//
select,
textarea,
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"] {
    display: block;
    width: 100%;
    height: variables.$input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
    padding: variables.$padding-base-vertical variables.$padding-base-horizontal;
    font-size: variables.$font-size-base;
    line-height: variables.$line-height-base;
    color : var(#{variables.$varPrefix}-gray-500);
    background-color: var(#{variables.$varPrefix}-white-color);
    background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
    border: 1px solid var(#{variables.$varPrefix}-gray-350);
    transition: all 0.5s ease-in-out 0s;

    // Unstyle the caret on `<select>`s in IE10+.
    &::-ms-expand {
        border: 0;
        background-color: transparent;
    }

    // Disabled and read-only inputs
    //
    // HTML5 says that controls under a fieldset > legend:first-child won't be
    // disabled if the fieldset is disabled. Due to implementation difficulty, we
    // don't honor that edge case; we style them as disabled anyway.
    &[disabled],
    &[readonly],
    fieldset[disabled] & {
        background-color: var(#{variables.$varPrefix}-gray-700);
        opacity: 1;
        // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655
    }

    &[disabled],
    fieldset[disabled] & {
        cursor: variables.$cursor-disabled;
    }

}

// Reset height for `textarea`s
textarea {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 100%;
    resize: vertical;
    height: auto;

}


// Search inputs in iOS
//
// This overrides the extra rounded corners on search inputs in iOS so that our
// `.form-control` class can properly style them. Note that this cannot simply
// be added to `.form-control` as it's not specific enough. For details, see
// https://github.com/twbs/bootstrap/issues/11586.

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

.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.cosmoswp-btn,
.woocommerce .added_to_cart,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.comments-area .submit,
.woocommerce #respond input#submit.alt.disabled,
.woocommerce a.button.alt.disabled,
.woocommerce button.button.alt.disabled,
.woocommerce input.button.alt.disabled,
.cwp-woocommerce-active .wc-block-grid .add_to_cart_button,
.cwp-edd-active .cwp-edd-cart-widget-wrapper .edd_checkout a {

    transition: all 0.5s ease-in-out 0s;
    box-sizing: border-box;
    border: none;
    font-family: variables.$font-family-base;
    font-size: variables.$font-size-base;
    font-weight: 500;
    line-height: variables.$line-height-base;
    outline: none;
    padding: (variables.$size__spacing-unit - 8) variables.$size__spacing-unit;
    text-decoration: none;
    vertical-align: bottom;
    display: inline-block;

    &:hover {
        cursor: pointer;
    }

    &:visited {
        text-decoration: none;
    }

    &:focus {
        outline: none;
    }
}

/*----------------------------
  Custom CheckBox
----------------------------*/
.cwp-checkbox {
    $parent : &;
    position: relative;
    padding-left: 25px;
    line-height: 25px;
    margin-bottom: 10px;
    margin-top: 10px;

    label {
        cursor: pointer;
    }

    input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
        left: 0;
    }

    &-custom {
        position: absolute;
        top: 0;
        left: 0;
        height: 20px;
        width: 20px;
        background-color: var(#{variables.$varPrefix}-gray-350);

        &:after {
            content: "";
            position: absolute;
            display: none;
            left: 7px;
            top: 5px;
            width: 5px;
            height: 10px;
            border-style: solid;
            border-color: var(#{variables.$varPrefix}-white-color);
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }
    }

    &:hover {
        input[type="checkbox"] {
            ~#{$parent}-custom {
                background-color: var(#{variables.$varPrefix}-gray-500);
            }
        }
    }

    input[type="checkbox"]:checked {
        ~#{$parent}-custom {
            background-color: var(#{variables.$varPrefix}-primary-color);

            &:after {
                display: block;
            }
        }
    }
}

.wpcf7-form {
    label {
        display: block;
    }
}