/* Editコンポーネントのレイアウト */
.EditComponentContainer {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;

    .Hidden {
        display: none;
    }

    /* input[type="text"],
    input[type="date"], */
    input,
    select
    {
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 1em;

        /* gridなどでボタンと一緒に表示されている場合、高さを揃える */
        height: 100%;
    }

    .Title {
        font-size: 1.3em;
        font-weight: bold;
        color: #333;
    }

    details[open] summary.Title {
        padding-bottom: 15px;
    }
    
    .SubTitle {
        font-size: 1.1em;
        font-weight: bold;
        color: #333;
    }

    .Description {
        font-size: 1em;
        color: #555;
        font-weight: 300;
    }

    .FormBoxWrapper {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    /* フォームを表示するボックス */
    .FormBox {
        display: flex;
        flex-direction: column;
        gap: 5px;

        /* フォームの中に入れ子になるボックス */
        &.inset {
            padding: 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
            background-color: #fafafa;
        }

        label {
            /* labelでinputなどを囲んでも同じレイアウトになるように */
            display: flex;
            flex-direction: column;
            gap: 5px;

            /* font-weight: bold; */
            color: #777;
        }
    }

    /* 複数のラジオボタンを表示するブロック */
    .RadioGroupBlock {
        display: flex;
        gap: 10px;

        /* ラジオボタンそのものは隠す */
        input[type="radio"] {
            display: none;
        }

        /* ラジオボタンと連動するlabelをボタンにする */
        .RadioButton {
            padding: 8px 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
            cursor: pointer;
            background-color: #f0f0f0;
            color: #333;

            input[type="radio"]:checked + & {
                background-color: #007bff;
                color: #fff;
                border-color: #007bff;
            }
        }
    }

    /* input要素の横にボタンがあるブロック */
    .InputButtonBlock {
        display: flex;
        gap: 10px;

        input {
            flex: 1;
        }

        button {
            /* width: 150px; */
        }
    }

    /* フォームの動作（送信ボタンなど）のためのボタンを表示するボックス */
    .ButtonBox {
        display: flex;
        justify-content: flex-start;
    }
}