/* テキスト系 */
body:not(.--CLIENT-USE-TOUCH, .--CLIENT-USE-PEN) {
    .tsiv2-text:has(input[type="text"],input[type="password"],input[type="number"],input[type="email"],input[type="time"],input[type="datetime-local"],input[type="url"]) {
        input:not(:disabled, :focus):hover {
            border-color: #aaa;
        }
    }
}
.tsiv2-text:has(input[type="text"],input[type="password"],input[type="number"],input[type="email"],input[type="time"],input[type="datetime-local"],input[type="url"]) {
    width: 100%;
    display: block;
    position: relative;
    cursor: pointer;

    input {
        padding-bottom: 0px;
        height: 40px;
        background: transparent;
        border: none;
        border-bottom: 2px solid #ddd;
        font-family: 'Open Sans', sans-serif;
        font-size: 1em;
        transition: 0.1s;
        width: 100%;
        border-radius: 0;
        display: block;
        bottom: 0;
        outline: none;
    }
    .tsiv2-label {
        display: block;
        position: absolute;
        pointer-events: none;
        height: fit-content;
        top: 10px;
        left: 15px;
        transition: 0.1s;
        color: #9a9a9a;
    }
    input:focus {
        border-bottom: 2px solid #4db4b4;
    }
    :is(input:not(:placeholder-shown), input:focus) + .tsiv2-label {
        font-size: 0.7em;
        top: -2px;
        left: 10px;
    }
    input:focus + .tsiv2-label {
        color: #4db4b4;
    }
    input:user-invalid {
        border-bottom: 2px solid #f30f0f;
    }
    input:user-invalid + .tsiv2-label {
        color: #f30f0f;
    }
    input:disabled {
        color: #ccc;
    }
    input:disabled + .tsiv2-label {
        color: #ccc;
    }
}
.tsiv2-text:has(input[type="datetime-local"]) input {
    padding-top: 22px !important;
}


/* テキストエリア */
body:not(.--CLIENT-USE-TOUCH, .--CLIENT-USE-PEN) {
    .tsiv2-textarea:has(textarea) {
        textarea:not(:disabled, :focus):hover {
            border-color: #aaa;
        }
    }
}
.tsiv2-textarea:has(textarea) {
    width: 100%;
    display: block;
    position: relative;
    cursor: pointer;

    textarea {
        font-family: 'Open Sans', sans-serif;
        padding: 10px;
        font-size: 1em;
        background: transparent;
        border-bottom: 2px solid #ddd;
        transition: all 0.1s;
        width: 100%;
        border-radius: 0;
        display: block;
        bottom: 0;
        outline: none;
        border: 2px solid #ddd;
        border-radius: 4px;
        resize: none;
        height: fit-content;
    }
    .tsiv2-label {
        position: absolute;
        top: 10px; left: 12px;
        display: block;
        pointer-events: none;
        height: fit-content;
        color: #9a9a9a;
        transition: all 0.1s;
        padding: 0 5px;
        background-color: white;
    }
    textarea:focus {
        border: 2px solid #4db4b4;
    }
    :is(textarea:not(:placeholder-shown), textarea:focus) + .tsiv2-label {
        font-size: 0.7em;
        top: -8px;
        left: 10px;
    }
    textarea:focus + .tsiv2-label {
        color: #4db4b4;
    }
    textarea:user-invalid {
        border: 2px solid #f30f0f;
    }
    textarea:user-invalid + .tsiv2-label {
        color: #f30f0f;
    }
    textarea:disabled {
        color: #ccc;
    }
    textarea:disabled + .tsiv2-label {
        color: #ccc;
    }
}
form .tsfv3-in  .tsiv2-textarea:has(textarea) .tsiv2-label, .tsiv2-textarea:has(textarea) .tsiv2-label.fafafa {
    background-color: #fafafa;
}

/* チェックボックス */
body:not(.--CLIENT-USE-TOUCH, .--CLIENT-USE-PEN) {
    .tsiv2-checkbox:has(input[type="checkbox"]) {
        input:not(:disabled):not(:checked):hover + .tsiv2-checkmark {
            background-color: #aaa;
        }
        input:not(:disabled):checked:hover + .tsiv2-checkmark{
            background-color: #0e647d;
        }
    }
}
.tsiv2-checkbox:has(input[type="checkbox"]) {
    width: 100%;
    display: flex;
    position: relative;
    cursor: pointer;

    label {
        display: flex;
        padding-right: 15px;
    }
    input {
        display: none;
    }
    .tsiv2-checkmark {
        margin: auto 0;
        position: relative;
        height: 20px; width: 20px;
        background-color: #D4D4D4;
    }
    input:checked + .tsiv2-checkmark {
        background-color: #4db4b4;
    }
    input:not(:disabled):checked + .tsiv2-checkmark::before {
        content: '';
        position:absolute;
        left: 8px;
        top: 4px;
        width: 3px;
        height: 8px;
        border: solid #fff;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
        
    }
  
    input:disabled + .tsiv2-checkmark{
        background: #ddd;
    }
    input:disabled:checked + .tsiv2-checkmark::before {
            content: '';
            position:absolute;
            left: 8px;
            top: 4px;
            width: 3px;
            height: 8px;
            border: solid #fff;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
    }
    label:has(input:disabled) + .tsiv2-label,
    label:has(input:disabled) + label .tsiv2-label {
        color: #aaa
    }
}

/* チェックボックス（タイル） */
body:not(.--CLIENT-USE-TOUCH, .--CLIENT-USE-PEN) {
    .tsiv2-tile:has(input[type="checkbox"]) {
        .tsiv2-in:has(input:not(:disabled):not(:checked)):hover {
            background-color: #ccc;
        }
        .tsiv2-in:has(input:not(:disabled):checked):hover {
            background-color: #0e647d;
        }
    }
}
.tsiv2-tile:has(input[type="checkbox"]) {
    width: 100%; height: 100%;
    cursor: pointer;
    
    .tsiv2-in {
        width: 100%; height: 100%;
        background-color: #f1f1f1;
        transition: 0.15s;

        label {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;

            input {
                display: none;
            }
            .tsiv2-label {
                width: 100%;
                text-align: center;
                transition: 0.15s;
            }
            .tsiv2-checkmark {
                display: none;

                position: absolute;
                top: 0px; right: 5px;
                color: #fff;
            }
        }
    }
    
    .tsiv2-in:has(input:not(:disabled):checked) {
        background-color: #4db4b4;

        .tsiv2-label {
            color: #fff;
        }
        .tsiv2-checkmark {
            display: block;
        }
    }
    .tsiv2-in:has(input:disabled) {
        background-color: #ddd;

        .tsiv2-label, .tsiv2-checkmark {
            color: #ccc;
        }
    }
    .tsiv2-in:has(input:disabled:checked) {
        background-color: #aaa;

        .tsiv2-checkmark {
            display: block;
        }
    }
}

/* セレクト */
body:not(.--CLIENT-USE-TOUCH, .--CLIENT-USE-PEN) {
    .tsiv2-select:has(select) {
        select:not(:disabled, :focus):hover {
            border-color: #aaa;
        }
    }
}
.tsiv2-select:has(select) {
    width: 100%;
    position: relative;
    cursor: pointer;

    select {
        display: inline-block;
        width: 100%;
        cursor: pointer;
        padding: 10px 15px;
        outline: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        border-bottom: 2px solid #ddd;
        color: #2d2d2d;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }
    select::-ms-expand {
        display: none;
    }
    select:focus {
        border-color: #4db4b4;
    }
    select:focus + .tsiv2-arrow {
        border-color: #4db4b4;
    }
    .tsiv2-arrow {
        position: absolute;
        top: 12px; right: 15px;
        height: 9px; width: 9px;
        border-color: #7b7b7b;
        border-style: solid;
        border-width: 0 0 3px 3px;
        transform: rotate(-45deg);
    }
    select:disabled {
        color: #aaa;
    }
    select:disabled + .tsiv2-arrow {
        border-color: #aaa;
    }
}

/* ラジオボタン（枠なし） */
body:not(.--CLIENT-USE-TOUCH, .--CLIENT-USE-PEN) {
    .tsiv2-radio:has(input[type="radio"]):has(label + label, label + .tsiv2-label) {
        input:not(:disabled):not(:checked):hover + .tsiv2-checkmark {
            background-color: #aaa;
        }
        input:not(:is(.tsiv2-red, .tsiv2-green)):not(:disabled):checked:hover + .tsiv2-checkmark {
            background-color: #0e647d;
        }
        input.tsiv2-green:not(:disabled):checked:hover + .tsiv2-checkmark {
            background-color: #2d7f4f;
        }
        input.tsiv2-red:not(:disabled):checked:hover + .tsiv2-checkmark {
            background-color: #bc6060;
        }
    }
}
.tsiv2-radio:has(input[type="radio"]):has(label + label, label + .tsiv2-label) {
    width: 100%;
    display: flex;
    position: relative;
    cursor: pointer;

    label {
        display: flex;
    }
    label:first-child {
        padding-right: 15px;
    }
    input {
        display: none;
    }
    .tsiv2-checkmark {
        margin: auto 0;
        position: relative;
        height: 20px; width: 20px;
        background-color: #D4D4D4;
        border-radius: 50%;
    }
    input:not(:is(.tsiv2-red, .tsiv2-green, :disabled)):checked + .tsiv2-checkmark {
        background-color: #4db4b4;
    }
    input:not(:disabled).tsiv2-red:checked + .tsiv2-checkmark {
        background-color: #FF7B7B;
    }
    input:not(:disabled).tsiv2-green:checked + .tsiv2-checkmark {
        background-color: #3DB370;
    }
    input:not(:disabled):checked + .tsiv2-checkmark::before {
        content: '';
        position: absolute;
        top: 50%; left: 50%;
        height: 12px; width: 12px;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        border: 2px solid #fff;
        background-color: transparent;
    }
  
    input:disabled + .tsiv2-checkmark{
        background: #ddd;
    }
    input:disabled:checked + .tsiv2-checkmark::before {
        content: '';
        position: absolute;
        top: 50%; left: 50%;
        height: 12px; width: 12px;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        border: 2px solid #fff;
        background-color: transparent;
    }
    label:has(input:disabled) + .tsiv2-label,
    label:has(input:disabled) + label .tsiv2-label {
        color: #aaa
    }
}

/* ラジオボタン（枠あり） */
body:not(.--CLIENT-USE-TOUCH, .--CLIENT-USE-PEN) {
    .tsiv2-radio:has(label input[type="radio"] + .tsiv2-checkmark + .tsiv2-label) {
        label:has(input:not(:disabled):not(:checked):hover) {
            border-color: #aaa;
            .tsiv2-checkmark {
                background-color: #aaa;
            }
        }
        label:has(input:not(:disabled):checked:hover) {
            border-color: #0e647d;
            .tsiv2-checkmark {
                background-color: #0e647d;
            }
            
        }
    }
}
.tsiv2-radio:has(label input[type="radio"] + .tsiv2-checkmark + .tsiv2-label) {
    width: 100%;
    position: relative;
    cursor: pointer;
        
    label {
        padding: 20px 30px;
        display: grid;
        gap: 20px;
        grid-template-columns: 20px 1fr;
        border-radius: 12px;
        border: 2px solid #D4D4D4;

        input {
            display: none;
        }
    }
    label:has(input:not(:disabled):checked) {
        border-color: #4db4b4;

        .tsiv2-checkmark {
            background-color: #4db4b4;
        }
    }
    .tsiv2-checkmark {
        margin: auto 0;
        position: relative;
        height: 20px; width: 20px;
        background-color: #D4D4D4;
        border-radius: 50%;
    }
    input:not(:disabled):checked + .tsiv2-checkmark::before {
        content: '';
        position: absolute;
        top: 50%; left: 50%;
        height: 12px; width: 12px;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        border: 2px solid #fff;
        background-color: transparent;
    }
    input:disabled + .tsiv2-checkmark{
        background: #ddd;
    }
    input:disabled + .tsiv2-checkmark + .tsiv2-label {
        color: #aaa;
    }
    label:has(input:disabled) {
        border-color: #ddd;
    }
    input:disabled:checked + .tsiv2-checkmark::before {
        content: '';
        position: absolute;
        top: 50%; left: 50%;
        height: 12px; width: 12px;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        border: 2px solid #fff;
        background-color: transparent;
    }
}

/* ファイルインプット */
body:not(.--CLIENT-USE-TOUCH, .--CLIENT-USE-PEN) .tsiv2-file:has(input[type="file"]:not(:disabled)):hover {
    background-color: rgba(0, 0, 0, 0.2);
}
.tsiv2-file:has(input[type="file"]) {
    width: 100%;
    position: relative;
    cursor: pointer;
    transition: all 0.15s;
    border-radius: 3px;

    input {
        opacity: 0;
        cursor: pointer;
        top: 0; left: 0;
        width: 0; height: 0;
        position: absolute;
    }
    button {
        width: 100%;
        background: transparent;
        cursor: pointer;
        border: none;
        padding: 5px 20px;
        overflow: hidden;
    }
    input:disabled + button {
        color: #aaa;
    }
}