/*
 Theme Name:   Gou Foody
 Theme URI:    https://goufoody.com/
 Description:  Tema oficial de Gou Foody.
 Author:       Efren Aguiar
 Author URI:   https://eaguiar.dev/
 Template:     bricks
 Version: 2.4.0
 Text Domain:  goufoody
*/

/*--------------------------------------------------------------
# Bricks Elements
# Description: Estilos personalizados para los elementos de Bricks.
--------------------------------------------------------------*/

/* Button
------------------------------*/

.brxe-button {
    &.bricks-background-primary {
        &:hover, &:focus {
            box-shadow: 0 0.25rem 0.25rem 0.125rem
            rgba(var(--bs-primary-rgb), 0.1),
        0 0.375rem 0.75rem -0.125rem rgba(var(--bs-primary-rgb), 0.4);
        }
    }
    &.bricks-background-secondary {
        &:hover, &:focus {
            box-shadow: 0 0.25rem 0.25rem 0.125rem color-mix(in srgb, var(--bs-gray-500), transparent 90%), 
            0 0.375rem 0.75rem -0.125rem color-mix(in srgb, var(--bs-gray-500), transparent 90%);
        }
    }
    &.bricks-background-dark {
        &:hover, &:focus {
            box-shadow: 0 0.25rem 0.25rem 0.125rem
            rgba(var(--bs-dark-rgb), 0.1),
        0 0.375rem 0.75rem -0.125rem rgba(var(--bs-dark-rgb), 0.4);
        }
    }
    &.bricks-background-light {
        &:hover, &:focus {
            box-shadow: 0 0.25rem 0.25rem 0.125rem
            rgba(var(--bs-light-rgb), 0.1),
        0 0.375rem 0.75rem -0.125rem rgba(var(--bs-light-rgb), 0.4);
        }
    }
    &.bricks-background-info {
        &:hover, &:focus {
            box-shadow: 0 0.25rem 0.25rem 0.125rem
            rgba(var(--bs-info-rgb), 0.1),
        0 0.375rem 0.75rem -0.125rem rgba(var(--bs-info-rgb), 0.4);
        }
    }
    &.bricks-background-success {
        &:hover, &:focus {
            box-shadow: 0 0.25rem 0.25rem 0.125rem
            rgba(var(--bs-success-rgb), 0.1),
        0 0.375rem 0.75rem -0.125rem rgba(var(--bs-success-rgb), 0.4);
        }
    }
    &.bricks-background-danger {
        &:hover, &:focus {
            box-shadow: 0 0.25rem 0.25rem 0.125rem
            rgba(var(--bs-danger-rgb), 0.1),
        0 0.375rem 0.75rem -0.125rem rgba(var(--bs-danger-rgb), 0.4);
        }
    }
    &.bricks-background-warning {
        &:hover, &:focus {
            box-shadow: 0 0.25rem 0.25rem 0.125rem
            rgba(var(--bs-warning-rgb), 0.1),
        0 0.375rem 0.75rem -0.125rem rgba(var(--bs-warning-rgb), 0.4);
        }
    }
}

/* Form
------------------------------*/

.brxe-form {
    .message {
        --message-color: var(--bs-info);
        --message-bg: var(--bs-info);
        --message-border-color: var(--bs-info);
        color: var(--message-color);
        background: 
        color-mix(in srgb, var(--message-bg), white 90%);
        border: 1px solid
        color-mix(in srgb, var(--message-border-color), white 60%);
        border-radius: var(--bs-border-radius);

        &.error {
            --message-color: var(--bs-danger);
            --message-bg: var(--bs-danger);
            --message-border-color: var(--bs-danger);
        }

        &.success {
            --message-color: var(--bs-success);
            --message-bg: var(--bs-success);
            --message-border-color: var(--bs-success);
        }

        .text {
            padding: 1rem;
        }

    }
}

/* Popup
------------------------------*/

.brx-popup {
    padding: .5rem;

    .brx-popup-backdrop {
        transition: .15s;
        background-color: rgba(var(--bs-dark-rgb), 0.6);
    }

    .brx-popup-content {
        /* max-width: 500px; */
        padding: 1.125rem;
        position: relative;
        border-radius: .75rem;

        & .brx-popup-close {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 1.25rem;
            height: 1.25rem;
            position: absolute;
            top: 1rem;
            right: 1rem;
            cursor: pointer;
            opacity: 0.5;
            transition: opacity .25s ease-in-out;
            z-index: 10;

            &:hover, &:focus {
                opacity: .75;
            }

            & > .brxe-icon {
                font-size: 1rem;
            }
        }
    }
}