@import "variables.css";

input,
textarea,
select,
a {
    outline: none;
}

input.text-field:focus {
    box-shadow: 0 0 0 4px var(--blue-7);
    color: var(--primary);
}

.btn {
    display: inline-flex;
    height: 52px;
    justify-content: center;
    align-items: center;
    border-radius: var(--btn-corner-radius);
    text-decoration: none;
    outline: none;
    cursor: pointer;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
    min-width: 200px;
}

.btn,
.btn.medium {
    width: 320px;
}

.btn.small {
    width: 200px;
}

.button-container {
    padding-top: 40px;
    padding-bottom: 40px;
}

@media screen and (max-width: 768px) {
    .button-container {
        position: relative;
        margin-top: 0 !important;
    }

    .register-form-back-button {
        position: absolute;
        bottom: 0;
    }
}

.btn-twin-container {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}

.btn-twin-container.small .btn {
    width: 200px;
}

.btn-grid {
    display: grid;
    justify-content: normal;
    gap: var(--spacing-xl);
}

/*
 * Primary button
 */

.btn-primary {
    color: var(--btn-primary-text);
    border: 1px solid var(--btn-primary-background);
    background: var(--btn-primary-background);
}

.btn-primary:hover {
    background: var(--btn-primary-background-hover);
}

.btn-primary:active {
    background: var(--btn-primary-background-active);
}

.btn-primary:not(:disabled):not(.disabled):active {
    background: var(--btn-primary-background-active) !important;
}

.btn-primary:focus {
    box-shadow: none !important;
}

.btn-primary:disabled {
    color: var(--btn-primary-text-disabled);
    border: 1px solid var(--btn-primary-background-disabled);
    background: var(--btn-primary-background-disabled);
}

/*
 * Secondary button
 */

.btn-secondary {
    color: var(--btn-secondary-text);
    border: solid 1px var(--primary);
    background: var(--btn-secondary-background);
    text-decoration-line: none !important;
}

.btn-secondary:hover {
    color: var(--white);
    border: solid 1px var(--primary);
    background: var(--btn-secondary-background-hover);
}

.btn-secondary:active {
    color: var(--white);
    border: solid 1px var(--blue-1);
    background: var(--blue-1);
}

.btn-secondary:disabled {
    color: var(--btn-secondary-text-disabled);
    border: 1px solid var(--btn-secondary-background-disabled);
    background: rgba(0, 0, 0, 0.0);
}

.btn-secondary:not(:disabled):not(.disabled).active,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled):focus {
    background-color: var(--btn-secondary-background-active) !important;
    border-color: var(--blue-focused) !important;
    box-shadow: none;
    color: var(--white);
}

.btn-secondary:not(:disabled):not(.disabled).active:focus,
.btn-secondary:not(:disabled):not(.disabled):active:focus {
    box-shadow: none;
}

/*
 * Primary attention button
 */

.btn-primary.attention {
    color: var(--white);
    border: 1px solid var(--green-1);
    background: var(--green-1);
}

.btn-primary.attention:hover {
    color: var(--white);
    border: 1px solid var(--green-3);
    background: var(--green-3);
}

.btn-primary.attention:active {
    color: var(--white);
    border: 1px solid var(--green-4);
    background: var(--green-4);
}

.btn-primary.attention:disabled {
    color: var(--btn-primary-text-disabled);
    border: 1px solid var(--btn-primary-background-disabled);
    background: var(--btn-primary-background-disabled);
}

@media (max-width: 704px) {
    .btn,
    .btn.small,
    .btn.medium {
        width: 100%;
    }

    .btn-twin-container {
        display: grid;
        justify-content: normal;
        gap: var(--spacing-l);
    }

    .btn-twin-container.small .btn {
        width: 100%;
    }
}

/*
 * Apple sign-in buttons
 */

.btn-apple {
    border: solid 1px black;
    background-size: auto;
    background: black no-repeat center;
}

.btn-apple-sign-up {
    background-image: url('../images/Sign_up_with_Apple.svg');
}

.btn-apple-sign-in {
    background-image: url('../images/Sign_in_with_Apple.svg');
}

/*
 * Google sign-in buttons
 */

.btn-google {
    border: solid 1px #131314;
    background-size: auto;
    background: #131314 no-repeat center;
}

.btn-google-sign-up {
    background-image: url('../images/Sign_up_with_Google.svg');
    background-size: contain;
}

.btn-google-sign-in {
    background-image: url('../images/Sign_in_with_Google.svg');
    background-size: contain;
}