/*
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

MW WP フォームプラグインで作成されたフォーム用

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
*/



/*
*****************************************************************************************

フォームの要素

*****************************************************************************************
*/

:where(.form-container) {

    /*
    ***************************** checkbox, radio *****************************
    */

    .checkboxes:has( > .vertical-item), 
    .form-checkboxes:has( > .vertical-item),
    .radios:has( > .vertical-item), 
    .form-radios:has( > .vertical-item) {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .checkboxes:has( > .horizontal-item), 
    .form-checkboxes:has( > .horizontal-item),
    .radios:has( > .horizontal-item), 
    .form-radios:has( > .horizontal-item) {
        display: flex;
        flex-wrap: wrap;
        gap: 16px 32px;
    }

    :is(.checkboxes, .form-checkboxes, .radios, .form-radios) {
        :is(.vertical-item, .horizontal-item) {
            margin: 0;
        }
    }

    .mwform-checkbox-field, 
    .mwform-radio-field {
        position: relative;
    }

    .mwform-checkbox-field input[type="checkbox"],
    .mwform-radio-field input[type="radio"] {
        display: inline !important;
        visibility: visible !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute;
        z-index: -1;
    }

    .mwform-checkbox-field,
    .mwform-radio-field {
        min-height: var(--checkbox-size);
        margin: 0;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        font-size: inherit;
    }

    .mwform-checkbox-field-text,
    .form-checkbox input + span.mwform-checkbox-field-text,
    .mwform-radio-field-text  {
        display: block;
        padding-left: calc(var(--checkbox-size) + 10px);
    }

    .mwform-checkbox-field-text::before,
    .mwform-radio-field-text::before,
    .form-checkbox input + span.mwform-checkbox-field-text::before {
        content: '';
        display: block;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        width: var(--checkbox-size);
        height: var(--checkbox-size);
        top: 0;
        border: 2px solid var(--gray-input);
        border-radius: var(--border-radius-xs);
        position: absolute;
        left: 0;
        top: 0;
    }

    /*---------- focus ----------*/


    input[type="checkbox"]:focus-visible + .mwform-checkbox-field-text::before,
    input[type="radio"]:focus-visible + .mwform-radio-field-text::before {
        border-color: var(--blue-highlight);
    }

    @media (width <= 768px){

        .checkboxes:has( > .horizontal-item), 
        .form-checkboxes:has( > .horizontal-item), 
        .radios:has( > .horizontal-item), 
        .form-radios:has( > .horizontal-item) {
            flex-direction: column;
        }

        .mwform-checkbox-field-text::before,
        .mwform-radio-field-text::before {
            top: .1em;
        }

    }

    /*
    ***************************** checkbox *****************************
    */

    /*---------- checked ----------*/

    input[type="checkbox"]:checked + .mwform-checkbox-field-text::after  {
        content: '';
        display: block;
        border: 3px solid var(--blue-highlight);
        border-top: none;
        border-right: none;
        transform: rotate(-45deg);
        position: absolute;
        width: calc(var(--checkbox-size) * .6);
        height: calc(var(--checkbox-size) * .4);
        top: calc(var(--checkbox-size) * .2);
        left: calc(var(--checkbox-size) * .25);
    }



    /*---------- disabled ----------*/


    /*---------- readonly ----------*/


    /*
    ***************************** radio *****************************
    */

    .mwform-radio-field-text::before {
        border-radius: 100%;
    }

    /*---------- checked ----------*/

    input[type="radio"]:checked + .mwform-radio-field-text::after  {
        content: '';
        display: block;
        width: calc(var(--radio-size) - 14px);
        height: calc(var(--radio-size) - 14px);
        background-color: var(--blue-highlight);
        border-radius: 100%;
        position: absolute;
        left: 7px;
        top: 7px;
    }

    /*
    ***************************** inputtext *****************************
    */


    /*
    ***************************** select *****************************
    */

    /*
    ***************************** label *****************************
    */


    /*
    ***************************** note *****************************
    */

    /*
    ***************************** error *****************************
    */

    .error {
        display: block;
        width: 100%;
        margin-top: var(--form-element-my);
    }


    /*
    ***************************** btn *****************************
    */

    :where(.form-btn-block) .btn-submit {
        margin: 0;
    }

}