.button-root {
    font-size: 20px;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.01em;
    transition: all 0.3s ease;
}

.button-root.color-01 {
    color: var(--color-white);
    background-color: var(--color-01);
}

.button-root.color-primary {
    color: var(--color-white);
    background-color: var(--color-primary-01);
}

.button-root.color-primary-outline {
    color: var(--color-primary-01);
    background-color: transparent;
    border: 1px solid var(--color-primary-01);
}

.button-root.color-primary-outline:hover {
    color: var(--color-white);
    background-color: var(--color-primary-01);
}

.button-root.color-white-outline {
    color: var(--color-white);
    background-color: transparent;
    border: 1px solid var(--color-white);
}

.button-root.color-white-outline:hover {
    color: var(--color-gray-01);
    background-color: var(--color-white);
}

.button-root.color-white {
    color: var(--color-gray-01);
    background-color: var(--color-white);
}

.button-root.size-xs {
    border-radius: 8px;
    padding: 1px 12px;
}
.button-root.size-sm {
    border-radius: 8px;
    padding: 5px 16px;
}
.button-root.size-md {
    border-radius: 50px;
    padding: 9px 20px;
}
.button-root.size-lg {
    border-radius: 50px;
    padding: 13px 24px;
}
.button-root.size-xl {
    border-radius: 50px;
    padding: 17px 28px;
}

@media (max-width: 768px) {
    .button-root.size-lg {
        padding: 10px 24px;
        font-size: 14px;
    }
}