MOFA/components/buttons/buttons.css

.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");
    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;
    }

    &.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;
    }


    &[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-keyword {
        background-image: var(--select-icon);
        background-repeat: no-repeat;
        background-position: center right;
    }
}