.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 9999px;
    transition: var(--transition-bg);
}
.btn-transparent:hover {
    background: var(--color-medium-gray);
}
.btn-filled {
    background: linear-gradient(
        180deg,
        var(--color-dark-green),
        var(--color-medium-green)
    );
}
.btn-active {
    background: var(--color-medium-green);
}

.small.btn-filled, .small.btn-active {
    height: 32px;
    width: 32px;
}
.medium.btn-filled, .medium.btn-active {
    height: 48px;
    width: 48px;
}
.large.btn-filled, .large.btn-active {
    height: 72px;
    width: 72px;
}

.small.btn-transparent {
    height: 20px;
    width: 20px;
}
.medium.btn-transparent {
    height: 46px;
    width: 46px;
}
.large.btn-transparent {
    height: 48px;
    width: 48px;
}