input:focus,
select:focus,
textarea:focus-visible {
    outline: unset;
    outline-offset: 0;
}

select::-ms-expand {
    display: none;
}


/* 
送出按鈕 
input[type=submit], button[type=submit]
    顏色/字級 > /assets/css/commonElement/preset_buttons.less
*/

input[type=submit],
input[type=submit]:hover {
    border: none;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
}


/* 輸入框 + 下拉選單 共同 */

.input,
.select {
    width: 100%;
    margin: 16px 0 32px;
    position: relative;
}

label {
    display: block;
}

input,
textarea,
select,
label {
    font: var(--content03);
    color: var(--primaryBrown);
}

label {
    margin-bottom: 4px;
}

.input input[type=text],
.input input[type=number],
.input input[type=tel],
.input input[type=email],
.input input[type=password],
.input textarea,
.select select {
    border: 2px solid var(--primaryBrown);
    box-sizing: border-box;
    border-radius: 8px;
    padding: 12px 24px;
    width: 100%;
}

.input input[type=text]::placeholder,
.input input[type=number]::placeholder,
.input input[type=tel]::placeholder,
.input input[type=email]::placeholder,
.input input[type=password]::placeholder {
    color: var(--grayLight);
}


/* 其它屬性欄位 */

.input.password .inputEyeBtn {
    width: 20px;
    height: 20px;
    background-image: url(/assets/images/commonElement/icon_input_eye_close.svg);
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    position: absolute;
    right: 24px;
    bottom: 16px;
}

.input.password .inputEyeBtn.openEyes {
    background-image: url(/assets/images/commonElement/icon_input_eye_open.svg);
}

.input.password input[type=text],
.input.password input[type=password] {
    padding-right: 48px;
}


/* 下拉選單 */

.select::after {
    content: '';
    position: absolute;
    top: calc(50% - 12px);
    right: 24px;
    background-image: url(/assets/images/commonElement/icon_input_select_arrow.svg);
    background-size: cover;
    width: 24px;
    height: 24px;
}

.select.error::after {
    filter: brightness(0) saturate(100%) invert(18%) sepia(100%) saturate(2132%) hue-rotate(346deg) brightness(89%) contrast(96%);
}

.select.label::after {
    top: calc(50% + 4px);
}

.select select {
    -moz-appearance: none;
    -webkit-appearance: none;
    background-color: var(--white);
    color: inherit;
}

.select select option {
    background: var(--white);
    color: var(--grayLight);
}


/* input/select 併排 */

.inputHalf {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    margin: 16px 0 32px;
}

.inputHalf .input,
.inputHalf .select {
    margin: 0;
}


/* 文字框 */

textarea {
    min-height: 10em;
}


/* radio + checkbox */

.radio,
.checkbox {
    display: flex;
    position: relative;
    margin: 16px 0 32px;
}

.radio input,
.checkbox input {
    display: none;
}

.radio input+label,
.checkbox input+label {
    cursor: pointer;
    display: grid;
    grid-template-columns: 24px auto;
    gap: 8px;
    align-items: center;
    margin: 0;
    font: var(--content01);
    color: var(--primaryBrown);
}

.radio label:before,
.checkbox label:before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 100%;
    background: var(--white);
    background-size: contain;
    background-position: center;
    border: 2px solid var(--primaryBrown);
    box-sizing: border-box;
}

.radio input+label:hover,
.checkbox input+label:hover {
    color: var(--secondaryBrown);
}


/* .radio label:before {
    background-image: url(/assets/images/commonElement/icon_input_radio.svg);
} */

.radio input:checked+label:before {
    background-image: url(/assets/images/commonElement/icon_input_radio.svg);
}

.checkbox input:checked+label:before {
    background-color: #F2655C;
    background-image: url(/assets/images/commonElement/icon_input_checkbox_check.svg);
}


/* radio + checkbox 群組 - 左右排 .checkInline  - 上下排 .checkRow */

.radio.inline,
.checkbox.inline {
    align-items: flex-start;
    gap: 16px;
}

.radio.row,
.checkbox.row {
    display: grid;
    gap: 12px;
}


/* radio + checkbox 說明文字 */

.radio.explain,
.checkbox.explain {
    align-items: flex-start;
    gap: 8px;
}

.radio.explain label,
.checkbox.explain label {
    margin-top: 2px;
}

.radio.explain .explainText,
.checkbox.explain .explainText {
    font: var(--content03);
    color: var(--gray3);
}

.radio.explain .explainText a,
.checkbox.explain .explainText a {
    text-decoration: underline;
    color: var(--primaryBrown);
}


/* 日期*/

.input input[type=date],
.input input[type=date]:-webkit-autofill {
    width: 100%;
    border: none;
    border-bottom: 2px solid var(--primaryBrown);
    font-family: inherit;
    background-color: transparent;
}


/* 錯誤/提示訊息 */

.input .state,
.select .state,
.radio .state,
.checkbox .state {
    position: absolute;
    right: 0;
    bottom: -24px;
    font: var(--content04);
    color: #B72020;
    display: flex;
    gap: 8px;
    align-items: center;
}

.input .state.warning,
.select .state.warning,
.radio .state.warning,
.checkbox .state.warning {
    display: none;
}

.input .state.warning::before,
.select .state.warning::before,
.radio .state::before,
.checkbox .state::before {
    content: "";
    width: 20px;
    height: 20px;
    display: block;
    background-image: url(/assets/images/commonElement/icon_input_warning.svg);
    background-size: cover;
}

.input .state a,
.select .state a,
.radio .state a,
.checkbox .state a {
    text-decoration: underline;
    color: var(--primaryBrown);
}

.input.error .state.warning,
.select.error .state.warning,
.radio.error .state.warning,
.checkbox.error .state.warning {
    display: flex;
    align-items: center;
}

.input.error .state.notice,
.select.error .state.notice,
.radio.error .state.notice,
.checkbox.error .state.notice {
    display: none;
}

.input.error input[type=text],
.input.error input[type=number],
.input.error input[type=tel],
.input.error input[type=email],
.input.error input[type=password],
.input.error textarea,
.select.error select,
.radio.error .state,
.checkbox.error .state {
    border-color: #B72020;
}

@media screen and (min-width: 1024px) {
    .input input[type=text],
    .input input[type=number],
    .input input[type=tel],
    .input input[type=email],
    .input input[type=password],
    .input textarea,
    .select select {
        padding: 24px 32px;
    }
    .input.password .inputEyeBtn {
        right: 32px;
        bottom: 28px;
    }
    .input.password input[type=text],
    .input.password input[type=password] {
        padding-right: 56px;
    }
    .radio.row,
    .checkbox.row {
        gap: 24px;
    }
    /* 錯誤/提示訊息 */
    .input .state,
    .select .state,
    .radio .state,
    .checkbox .state {
        bottom: -28px;
    }
    .input .state.warning::before,
    .select .state.warning::before,
    .radio .state::before,
    .checkbox .state::before {
        width: 24px;
        height: 24px;
    }
}