.button {
    padding: .5rem;
    border-radius: 8px;
    border: 1px solid #ffffff80;
    background: #ffffff10;
    transition: .15s;
}
.button:hover {
    border-color: #ffffff;
    cursor: pointer;
}

.primary-button {
    background: #2AF7A120;
    border: 1px solid #6CE8F7B0;
}
.primary-button:hover {
    border: 1px solid #6CE8F7;
}

.tertiary-button {
    background: none;
}

.disabled-button {
    cursor: not-allowed;
    background: #00000080;
    border: 1px solid #ffffff40;
}
.disabled-button:hover {
    border: 1px solid #ffffff40;
    cursor: not-allowed;
}

@media (min-width: 320px) and (max-width: 767px) {
    .button {
        padding: 0.5rem;
        border-radius: 8px;
        border: 1px solid #ffffff80;
        background: #ffffff10;
        transition: 0.15s;
    }
    .button:hover {
        border-color: #ffffff;
        cursor: pointer;
    }
    
    .primary-button {
        background: #2AF7A120;
        border: 1px solid #6CE8F7B0;
    }
    .primary-button:hover {
        border: 1px solid #6CE8F7;
    }
    
    .tertiary-button {
        background: none;
    }
    
    .disabled-button {
        cursor: not-allowed;
        background: #00000080;
        border: 1px solid #ffffff40;
    }
    .disabled-button:hover {
        border: 1px solid #ffffff40;
        cursor: not-allowed;
    }    
}