@import url('variables.css');

.google-login-container {
    display: flex;
    justify-content: center;
}

.google-signin-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: clamp(2.5rem, 8vw, 3rem);
    padding: 0 clamp(0.5rem, 2vw, 1.25rem);
    border: 1px solid var(--border-input);
    background-color: #FFFFFF;
    font-family: "Roboto", "Segoe UI", sans-serif;
    font-size: clamp(0.8125rem, 2.6vw, 0.9375rem);
    font-weight: 600;
    color: #5E5E5E;
    text-decoration: none;
    white-space: nowrap;
    border-radius: var(--radius-sm);
    cursor: pointer;
    margin: 0;
    transition: background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.google-signin-btn img {
    width: clamp(16px, 4vw, 20px);
    height: clamp(16px, 4vw, 20px);
    margin-right: clamp(6px, 1.5vw, 12px);
}

.google-signin-btn:hover {
    background-color: #F7F9FC;
    border-color: var(--asseco-blue);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.google-signin-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.google-signin-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}