.button {
    &.switch {
        --default: #F0F0F0;
        --active: #3366FF;
        --height: 39px;
        height: var(--height);
        cursor: pointer;
        display: inline-block;
        background-color: var(--default);
        border-radius: var(--height);
        position: relative;
        user-select: none;

        input {
            opacity: 0;
            width: 0;
            height: 0;
            position: absolute;

            &:checked {
                ~.switch-label {
                    span {
                        transition: ease all 0.4s;

                        &:first-of-type {
                            color: #fff;
                            font-weight: 500;
                        }

                        &:last-of-type {
                            color: #999999;
                            font-weight: 400;
                        }
                    }

                    &:before {
                        transform: translateX(0%);
                        transition: ease all 0.4s;
                    }
                }
            }
        }

        .switch-label {
            height: var(--height);
            display: flex;
            align-items: center;
            gap: 23px;
            font-weight: 400;
            line-height: 1.193em;

            span {
                z-index: 1;
                transition: ease all 0.4s;

                &:first-of-type {
                    padding-left: 19px;
                    color: #999999;
                    font-weight: 400;
                }

                &:last-of-type {
                    padding-right: 12px;
                    color: #fff;
                    font-weight: 500;
                }
            }

            &:before {
                content: '';
                position: absolute;
                z-index: 0;
                width: 98px;
                height: var(--height);
                background-color: var(--active);
                border-radius: var(--height);
                transform: translateX(calc(100% - 9px));
                transition: ease all 0.4s;

            }
        }
    }


}



button {
    --download-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14' fill='none'%3E%3Cpath d='M1 13H9M5 1V10.3333M5 10.3333L8.33333 7M5 10.3333L1.66667 7' stroke='%233366FF' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --close-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M1.88806 1.85352L21.612 21.5774' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M21.6119 2.27612L1.88804 22' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    --search-keyword-icon: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M35.1208 30.8791L27.5053 23.2636C29.0788 20.8921 29.9998 18.0526 29.9998 15.0001C29.9998 6.72912 23.2708 0.00012207 14.9998 0.00012207C6.7288 0.00012207 -0.000198364 6.72912 -0.000198364 15.0001C-0.000198364 23.2711 6.7288 30.0001 14.9998 30.0001C18.0523 30.0001 20.8918 29.0791 23.2633 27.5056L30.8788 35.1211C32.0488 36.2926 33.9508 36.2926 35.1208 35.1211C36.2923 33.9496 36.2923 32.0506 35.1208 30.8791ZM4.4998 15.0001C4.4998 9.21012 9.2098 4.50012 14.9998 4.50012C20.7898 4.50012 25.4998 9.21012 25.4998 15.0001C25.4998 20.7901 20.7898 25.5001 14.9998 25.5001C9.2098 25.5001 4.4998 20.7901 4.4998 15.0001Z' fill='white'/%3E%3C/svg%3E%0A");
    --initial-icon: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.3333 7.33334C13.1703 6.16015 12.626 5.07311 11.7844 4.23967C10.9428 3.40623 9.8505 2.87262 8.67578 2.72104C7.50105 2.56947 6.30908 2.80833 5.28347 3.40084C4.25785 3.99335 3.4555 4.90663 3 6.00001M2.66666 3.33334V6.00001H5.33333M2.66666 8.66667C2.8297 9.83986 3.37395 10.9269 4.21557 11.7603C5.05719 12.5938 6.14949 13.1274 7.32422 13.279C8.49894 13.4306 9.69092 13.1917 10.7165 12.5992C11.7421 12.0067 12.5445 11.0934 13 10M13.3333 12.6667V10H10.6667' stroke='%233366FF' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    --plus-icon: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 8H12.5' stroke='%233366FF' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.5 4L8.5 12' stroke='%233366FF' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    --writing-icon: url("data:image/svg+xml,%3Csvg width='22' height='27' viewBox='0 0 22 27' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='path-1-inside-1_445_14044' fill='white'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.5 0.478516H0.5V26.1452H21.5V8.47852L13.5 0.478516Z'/%3E%3C/mask%3E%3Cpath d='M0.5 0.478516V-1.02148H-1V0.478516H0.5ZM13.5 0.478516L14.5607 -0.582144L14.1213 -1.02148H13.5V0.478516ZM0.5 26.1452H-1V27.6452H0.5V26.1452ZM21.5 26.1452V27.6452H23V26.1452H21.5ZM21.5 8.47852H23V7.8572L22.5607 7.41786L21.5 8.47852ZM0.5 1.97852H13.5V-1.02148H0.5V1.97852ZM2 26.1452V0.478516H-1V26.1452H2ZM21.5 24.6452H0.5V27.6452H21.5V24.6452ZM20 8.47852V26.1452H23V8.47852H20ZM12.4393 1.53918L20.4393 9.53918L22.5607 7.41786L14.5607 -0.582144L12.4393 1.53918Z' fill='%232D2D33' mask='url(%23path-1-inside-1_445_14044)'/%3E%3Cpath d='M12.9244 0.894775V8.89478H20.9244' stroke='%232D2D33' stroke-width='1.5'/%3E%3Crect x='5.31592' y='13.8953' width='11.3682' height='1.5' fill='%232D2D33'/%3E%3Crect x='5.31592' y='18.5422' width='11.3682' height='1.5' fill='%232D2D33'/%3E%3C/svg%3E%0A");
    --writing-icon-on: url("data:image/svg+xml,%3Csvg width='22' height='27' viewBox='0 0 22 27' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='path-1-inside-1_450_6851' fill='white'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.5 0.478485H0.5V26.1451H21.5V8.47849L13.5 0.478485Z'/%3E%3C/mask%3E%3Cpath d='M0.5 0.478485V-1.02151H-1V0.478485H0.5ZM13.5 0.478485L14.5607 -0.582175L14.1213 -1.02151H13.5V0.478485ZM0.5 26.1451H-1V27.6451H0.5V26.1451ZM21.5 26.1451V27.6451H23V26.1451H21.5ZM21.5 8.47849H23V7.85716L22.5607 7.41782L21.5 8.47849ZM0.5 1.97849H13.5V-1.02151H0.5V1.97849ZM2 26.1451V0.478485H-1V26.1451H2ZM21.5 24.6451H0.5V27.6451H21.5V24.6451ZM20 8.47849V26.1451H23V8.47849H20ZM12.4393 1.53915L20.4393 9.53915L22.5607 7.41782L14.5607 -0.582175L12.4393 1.53915Z' fill='%234675E4' mask='url(%23path-1-inside-1_450_6851)'/%3E%3Cpath d='M12.9244 0.894699V8.8947H20.9244' stroke='%234675E4' stroke-width='1.5'/%3E%3Crect x='5.31592' y='13.8953' width='11.3682' height='1.5' fill='%234675E4'/%3E%3Crect x='5.31592' y='18.5422' width='11.3682' height='1.5' fill='%234675E4'/%3E%3C/svg%3E%0A");
    --translation-icon: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_450_6860)'%3E%3Cpath d='M15.4284 5.11201V7.2811H13.9852C12.8544 7.2811 11.7364 7.79689 11.0697 8.54643C10.5448 9.00662 10.1672 9.70593 9.92089 10.3699C9.66063 11.0714 9.50308 11.852 9.50308 12.5187V17.6504H2.89C1.69881 17.6504 0.720908 16.6725 0.720908 15.4813V5.11201C0.720908 3.92083 1.69881 2.94292 2.89 2.94292H13.2593C14.4505 2.94292 15.4284 3.92083 15.4284 5.11201Z' stroke='%232D2D33' stroke-width='1.58714'/%3E%3Cmask id='mask0_450_6860' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='-1' y='2' width='18' height='17'%3E%3Cpath d='M13.9852 8.07467H16.222V5.11201C16.222 3.48255 14.8888 2.14935 13.2593 2.14935H2.89C1.26053 2.14935 -0.0726624 3.48255 -0.0726624 5.11201V15.4813C-0.0726624 17.1108 1.26053 18.444 2.89 18.444H10.2966V12.5187C10.2967 11.4072 10.8343 9.77186 11.6298 9.1116C12.1335 8.51907 13.0519 8.07467 13.9852 8.07467Z' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_450_6860)'%3E%3Cpath d='M5.48771 11.7079L4.84127 14.0699H2.97653L5.92282 4.87057H8.08592L11.0446 14.0699H9.11774L8.4713 11.7079H5.48771ZM7.79999 9.27135C7.51406 8.31412 7.27786 7.25743 6.99194 6.26291H6.94221C6.70601 7.26986 6.44495 8.31412 6.15902 9.27135L5.88552 10.2783H8.07349L7.79999 9.27135Z' fill='%232D2D33'/%3E%3C/g%3E%3Cpath d='M12.5759 12.4329C12.5759 11.235 13.547 10.2638 14.745 10.2638H25.11C26.308 10.2638 27.2791 11.235 27.2791 12.4329V22.888C27.2791 24.0859 26.308 25.0571 25.11 25.0571H14.745C13.547 25.0571 12.5759 24.0859 12.5759 22.888V12.4329Z' stroke='%232D2D33' stroke-width='1.58714'/%3E%3Cpath d='M23.0166 17.6282V22.8214H21.5232V12.4123H23.0166V16.3949H24.4762V17.6282H23.0166ZM20.2446 13.4871C20.2446 16.6212 19.068 19.2914 15.5945 21.0451L14.7572 19.9023C17.1898 18.6464 18.4683 17.0172 18.7398 14.6978H15.3342V13.4871H20.2446Z' fill='%232D2D33'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_450_6860'%3E%3Crect width='28' height='28' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    --translation-icon-on: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_445_14053)'%3E%3Cpath d='M15.4284 5.11207V7.28117H13.9852C12.8544 7.28117 11.7364 7.79695 11.0698 8.54649C10.5449 9.00668 10.1673 9.706 9.92092 10.37C9.66066 11.0715 9.50311 11.8521 9.50311 12.5187V17.6505H2.89003C1.69884 17.6505 0.720938 16.6726 0.720938 15.4814V5.11207C0.720938 3.92089 1.69884 2.94298 2.89003 2.94298H13.2593C14.4505 2.94298 15.4284 3.92089 15.4284 5.11207Z' stroke='%234675E4' stroke-width='1.58714'/%3E%3Cmask id='mask0_445_14053' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='-1' y='2' width='18' height='17'%3E%3Cpath d='M13.9852 8.07474H16.222V5.11207C16.222 3.48261 14.8888 2.14941 13.2593 2.14941H2.89003C1.26057 2.14941 -0.0726318 3.48261 -0.0726318 5.11207V15.4814C-0.0726318 17.1108 1.26057 18.444 2.89003 18.444H10.2967V12.5187C10.2967 11.4073 10.8343 9.77192 11.6299 9.11167C12.1335 8.51913 13.052 8.07474 13.9852 8.07474Z' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_445_14053)'%3E%3Cpath d='M5.48774 11.708L4.8413 14.07H2.97656L5.92285 4.87061H8.08595L11.0447 14.07H9.11777L8.47133 11.708H5.48774ZM7.80002 9.27139C7.51409 8.31416 7.27789 7.25747 6.99197 6.26294H6.94224C6.70604 7.2699 6.44498 8.31416 6.15905 9.27139L5.88556 10.2783H8.07352L7.80002 9.27139Z' fill='%234675E4'/%3E%3C/g%3E%3Cpath d='M12.5759 12.4329C12.5759 11.2349 13.5471 10.2638 14.745 10.2638H25.11C26.308 10.2638 27.2791 11.2349 27.2791 12.4329V22.8879C27.2791 24.0859 26.308 25.057 25.11 25.057H14.745C13.5471 25.057 12.5759 24.0859 12.5759 22.8879V12.4329Z' stroke='%234675E4' stroke-width='1.58714'/%3E%3Cpath d='M23.0167 17.6282V22.8215H21.5232V12.4124H23.0167V16.395H24.4762V17.6282H23.0167ZM20.2447 13.4872C20.2447 16.6213 19.068 19.2914 15.5945 21.0452L14.7572 19.9024C17.1898 18.6465 18.4683 17.0173 18.7399 14.6978H15.3343V13.4872H20.2447Z' fill='%234675E4'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_445_14053'%3E%3Crect width='28' height='28' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    --bulb-icon: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.7333 23.3333V24.2667C17.9809 24.2667 18.2183 24.1683 18.3933 23.9933C18.5683 23.8183 18.6667 23.5809 18.6667 23.3333H17.7333ZM10.2667 23.3333H9.33333C9.33333 23.5809 9.43167 23.8183 9.6067 23.9933C9.78173 24.1683 10.0191 24.2667 10.2667 24.2667V23.3333ZM11.2 28H16.8V26.1333H11.2V28ZM6.68267 11.9467L6.664 12.0773L8.512 12.3387L8.53253 12.208L6.68267 11.9467ZM14 5.6C12.2207 5.60009 10.5011 6.24198 9.15697 7.40783C7.81281 8.57367 6.93429 10.1852 6.68267 11.9467L8.53253 12.208C8.72119 10.8919 9.37622 9.68794 10.3808 8.81704C11.3855 7.94613 12.6704 7.46669 14 7.46667V5.6ZM21.3173 11.9467C21.0657 10.1852 20.1872 8.57367 18.843 7.40783C17.4989 6.24198 15.7793 5.60009 14 5.6V7.46667C15.3296 7.46669 16.6145 7.94613 17.6192 8.81704C18.6238 9.68794 19.2807 10.8919 19.4693 12.208L21.3173 11.9467ZM21.336 12.0773L21.3173 11.9467L19.4693 12.208L19.4861 12.3387L21.336 12.0773ZM19.8613 17.6568C21.0373 16.1373 21.6309 14.1587 21.336 12.0773L19.488 12.3405C19.595 13.0746 19.5526 13.8226 19.3634 14.5399C19.1741 15.2571 18.8419 15.9287 18.3867 16.5144L19.8613 17.6568ZM16.8 20.3467V23.3333H18.6667V20.3485L16.8 20.3467ZM17.7333 22.4H10.2667V24.2667H17.7333V22.4ZM11.2 23.3333V20.3485H9.33333V23.3333H11.2ZM6.664 12.0773C6.522 13.0587 6.5794 14.0587 6.83278 15.0173C7.08617 15.976 7.53032 16.8737 8.13867 17.6568L9.6152 16.5144C9.15996 15.9287 8.82588 15.2571 8.63663 14.5399C8.44738 13.8226 8.40499 13.0727 8.512 12.3387L6.664 12.0773ZM11.2 20.3467C11.2 18.8104 10.3824 17.5037 9.61333 16.5125L8.13867 17.6568C8.8536 18.5808 9.33333 19.4619 9.33333 20.3467H11.2ZM18.3867 16.5125C17.6157 17.5056 16.8 18.8104 16.8 20.3467H18.6667C18.6667 19.4619 19.1464 18.5808 19.8613 17.6568L18.3867 16.5125ZM13.0667 0V3.73333H14.9333V0H13.0667ZM0 14.9333H3.73333V13.0667H0V14.9333ZM24.2667 14.9333H28V13.0667H24.2667V14.9333ZM6.2608 6.80587L3.4608 4.00587L2.1392 5.32747L4.9392 8.12747L6.2608 6.80587ZM23.0608 8.12747L25.8608 5.32747L24.5392 4.00587L21.7392 6.80587L23.0608 8.12747Z' fill='%232D2D33'/%3E%3C/svg%3E%0A");
    --bulb-icon-on: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.7333 23.3333V24.2667C17.9809 24.2667 18.2183 24.1683 18.3933 23.9933C18.5683 23.8183 18.6667 23.5809 18.6667 23.3333H17.7333ZM10.2667 23.3333H9.33333C9.33333 23.5809 9.43167 23.8183 9.6067 23.9933C9.78173 24.1683 10.0191 24.2667 10.2667 24.2667V23.3333ZM11.2 28H16.8V26.1333H11.2V28ZM6.68267 11.9467L6.664 12.0773L8.512 12.3387L8.53253 12.208L6.68267 11.9467ZM14 5.6C12.2207 5.60009 10.5011 6.24198 9.15697 7.40783C7.81281 8.57367 6.93429 10.1852 6.68267 11.9467L8.53253 12.208C8.72119 10.8919 9.37622 9.68794 10.3808 8.81704C11.3855 7.94613 12.6704 7.46669 14 7.46667V5.6ZM21.3173 11.9467C21.0657 10.1852 20.1872 8.57367 18.843 7.40783C17.4989 6.24198 15.7793 5.60009 14 5.6V7.46667C15.3296 7.46669 16.6145 7.94613 17.6192 8.81704C18.6238 9.68794 19.2807 10.8919 19.4693 12.208L21.3173 11.9467ZM21.336 12.0773L21.3173 11.9467L19.4693 12.208L19.4861 12.3387L21.336 12.0773ZM19.8613 17.6568C21.0373 16.1373 21.6309 14.1587 21.336 12.0773L19.488 12.3405C19.595 13.0746 19.5526 13.8226 19.3634 14.5399C19.1741 15.2571 18.8419 15.9287 18.3867 16.5144L19.8613 17.6568ZM16.8 20.3467V23.3333H18.6667V20.3485L16.8 20.3467ZM17.7333 22.4H10.2667V24.2667H17.7333V22.4ZM11.2 23.3333V20.3485H9.33333V23.3333H11.2ZM6.664 12.0773C6.522 13.0587 6.5794 14.0587 6.83278 15.0173C7.08617 15.976 7.53032 16.8737 8.13867 17.6568L9.6152 16.5144C9.15996 15.9287 8.82588 15.2571 8.63663 14.5399C8.44738 13.8226 8.40499 13.0727 8.512 12.3387L6.664 12.0773ZM11.2 20.3467C11.2 18.8104 10.3824 17.5037 9.61333 16.5125L8.13867 17.6568C8.8536 18.5808 9.33333 19.4619 9.33333 20.3467H11.2ZM18.3867 16.5125C17.6157 17.5056 16.8 18.8104 16.8 20.3467H18.6667C18.6667 19.4619 19.1464 18.5808 19.8613 17.6568L18.3867 16.5125ZM13.0667 0V3.73333H14.9333V0H13.0667ZM0 14.9333H3.73333V13.0667H0V14.9333ZM24.2667 14.9333H28V13.0667H24.2667V14.9333ZM6.2608 6.80587L3.4608 4.00587L2.1392 5.32747L4.9392 8.12747L6.2608 6.80587ZM23.0608 8.12747L25.8608 5.32747L24.5392 4.00587L21.7392 6.80587L23.0608 8.12747Z' fill='%234675E4'/%3E%3C/svg%3E%0A");
    --editor-search-icon: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5959 11.4069L11.7584 10.2819L17.2476 16.1251L16.0851 17.2501L10.5959 11.4069Z' fill='white'/%3E%3Cpath d='M7.3371 12.7501C10.5471 12.7501 13.1494 10.2317 13.1494 7.12509C13.1494 4.01849 10.5471 1.50009 7.3371 1.50009C4.12704 1.50009 1.52478 4.01849 1.52478 7.12509C1.52478 10.2317 4.12704 12.7501 7.3371 12.7501Z' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A");
    --editor-plus-icon: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='8.25009' width='12' height='1.5' fill='%23626894'/%3E%3Crect x='9.75' y='3.00009' width='12' height='1.5' transform='rotate(90 9.75 3.00009)' fill='%23626894'/%3E%3C/svg%3E%0A");
    --editor-minus-icon: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='8.25009' width='12' height='1.5' fill='%23626894'/%3E%3C/svg%3E%0A");
    cursor: pointer;

    &.download-btn {
        width: 139px;
        height: 36px;
        display: flex;
        justify-content: flex-start;
        padding-left: 18px;
        align-items: center;
        border-radius: 80px;
        box-shadow: 0 0 0 1px #C0C0C0;
        color: #3366FF;
        font-size: 14px;
        font-weight: 500;
        line-height: 19.6px;
        background-image: var(--download-icon);
        background-repeat: no-repeat;
        background-position-x: 82%;
        background-position-y: center;

    }

    &.open-btn {
        width: 114px;
        height: 36px;
        display: flex;
        justify-content: flex-start;
        padding-left: 18px;
        align-items: center;
        border-radius: 80px;
        box-shadow: 0 0 0 1px #C0C0C0;
        color: #3366FF;
        font-size: 14px;
        font-weight: 500;
        line-height: 19.6px;
        background-image: var(--plus-icon);
        background-repeat: no-repeat;
        background-position-x: 82%;
        background-position-y: center;
    }

    &.close-btn {
        background-image: var(--close-icon);
        width: 24px;
        height: 24px;
        display: block;
        ;
    }

    &.find-btn {
        color: #3366FF;
    }

    &.upload-btn {
        color: #3366FF;
    }

    &.cancel {
        font-size: 20px;
        width: 134px;
    }

    &.temp-btn {
        background-color: #F0F0F0;
        color: #444444;
        width: 101px;
        height: 49px;
        border-radius: 4px;
        padding: 0;
        font-size: 18px;
    }

    &.initial {
        font-size: 20px;
        width: 134px;
        color: #3366FF;
        padding: 0 28px;
        text-align: left;
        background-image: var(--initial-icon);
        background-repeat: no-repeat;
        background-position-y: center;
        background-position-x: calc(100% - 28px);
    }

    &.confirm {
        font-size: 20px;
        width: 134px;
    }

    &.search-btn {
        border-radius: 0;
        width: 112px;
        height: 84px;
        font-size: 0;
        background-image: var(--search-keyword-icon);
        background-repeat: no-repeat;
        background-position: center center;
        background-color: #212B36;
    }

    &.attach-file {
        position: absolute;
        transform: translate(12px, -3px);
        display: inline-block;
        width: 24px;
        height: 24px;
        background-image: var(--file-icon);
        background-repeat: no-repeat;
        background-position: center center;
    }

    &.remove {
        width: 68px;
        height: 34px;
        padding: 6px 20px;
        border-radius: 4px;
        box-shadow: 0 0 0 1px #3366FF;
        color: #3366FF;
        background-color: #fff;
    }

    &.register {
        background-color: #3366FF;
        color: #fff;
        width: 101px;
        height: 49px;
        border-radius: 4px;
        padding: 0;
        font-size: 18px;
    }

    &.search-icon-btn {
        width: 48px;
        height: 48px;
        background-color: #3366FF;
        border-radius: 6px;
        background-image: var(--editor-search-icon);
        background-repeat: no-repeat;
        background-position: center center;
    }

    &.plus-icon-btn {
        width: 48px;
        height: 48px;
        background-color: #fff;
        border-radius: 6px;
        box-shadow: 0 0 0 1px #CCCCCC;
        background-image: var(--editor-plus-icon);
        background-repeat: no-repeat;
        background-position: center center;
    }

    &.minus-icon-btn {
        width: 48px;
        height: 48px;
        background-color: #fff;
        border-radius: 6px;
        box-shadow: 0 0 0 1px #CCCCCC;
        background-image: var(--editor-minus-icon);
        background-repeat: no-repeat;
        background-position: center center;
    }

    &.translation-btn{
        width:132px;
        height:48px;
        background-color: #4675E4;
        color:#fff;
        font-family: 'SpoqaHanSansNeo';
        font-size: 18px;
        font-weight: 700;
        line-height: 22.54px;
    }

    &.editor-btn {
        width: 190px;
        height: 90px;
        text-align: left;
        padding-left: 38px;
        font-family: 'SpoqaHanSansNeo';
        font-size: 20px;
        font-weight: 500;
        line-height: 25.04px;
        background-repeat: no-repeat;
        background-position: center left;

        &:hover {
            color: #4675E4;
            font-weight: 700;
            transition: ease all 0.3s;
        }

        &[selected] {
            font-weight: 700;
            color: #4675E4;
        }

        &.writing {
            background-image: var(--writing-icon);
            transition: ease all 0.3s;

            &:hover {
                background-image: var(--writing-icon-on);
            }

            &[selected] {
                background-image: var(--writing-icon-on);
            }
        }

        &.translation {
            background-image: var(--translation-icon);

            &:hover {
                background-image: var(--translation-icon-on);
            }

            &[selected] {
                background-image: var(--translation-icon-on);
            }
        }

        &.guide {
            background-image: var(--bulb-icon);

            &:hover {
                background-image: var(--bulb-icon-on);
            }

            &[selected] {
                background-image: var(--bulb-icon-on);
            }
        }
    }



    &[variant="text"] {
        padding: 0;

        &.filter {
            font-size: 20px;
            font-weight: 400;
            line-height: 28px;
            position: relative;

            &:first-of-type {
                &:before {
                    content: '';
                    display: block;
                    position: absolute;
                    right: -14px;
                    bottom: 6px;
                    width: 1px;
                    height: 16px;
                    background-color: #BDBDBD;
                }
            }
        }

        &[current] {
            color: #3366FF;
            font-weight: 700;
        }
    }

}

select {
    --select-icon: url("data:image/svg+xml,%3Csvg width='14' height='9' viewBox='0 0 14 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.600098 0.799927L7.0001 8.79993L13.4001 0.799927H0.600098Z' fill='%23222222'/%3E%3C/svg%3E%0A");
    --select-icon-caret: url("data:image/svg+xml,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.66675 5.83337L8.00008 11.1667L13.3334 5.83337' stroke='%23212B36' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --select-icon-arrow-gray: url("data:image/svg+xml,%3Csvg width='9' height='6' viewBox='0 0 9 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.19377 5.68565C5.00975 5.88703 4.7602 6.00015 4.5 6.00015C4.2398 6.00015 3.99025 5.88703 3.80623 5.68565L0.28731 1.83373C0.150115 1.68351 0.0566902 1.49214 0.0188437 1.2838C-0.019002 1.07547 0.000430107 0.859525 0.0746851 0.663277C0.148939 0.467029 0.274682 0.299286 0.436016 0.181253C0.59735 0.06322 0.787032 0.000197887 0.981083 0.000152588L8.01892 0.000152588C8.21297 0.000197887 8.40265 0.06322 8.56398 0.181253C8.72532 0.299286 8.85106 0.467029 8.92531 0.663277C8.99957 0.859525 9.019 1.07547 8.98116 1.2838C8.94331 1.49214 8.84988 1.68351 8.71269 1.83373L5.19377 5.68565Z' fill='%23B8BBD1'/%3E%3C/svg%3E%0A");

    &.select-keyword {
        background-image: var(--select-icon);
        background-repeat: no-repeat;
        background-position: center right;
    }
}