/*
Theme Name:   Bricks Child Theme
Theme URI:    https://bricksbuilder.io/
Description:  Use this child theme to extend Bricks, overwrite style for original Bricks element.
Author:       Yaskawa
Author URI:   https://bricksbuilder.io/
Template:     bricks
Version:      1.0
Text Domain:  bricks
*/

/*=======BUTTON========*/
.bricks-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 1.2rem;
border-radius: 0.6rem;
cursor: pointer;
text-decoration: none;
font-family: var(--font-body);
line-height: var(--lh-body);
letter-spacing: var(--ls-body);
white-space: nowrap;
-webkit-appearance: none;
user-select: none;
position: relative;
overflow: hidden;
z-index: 1;
isolation: isolate;
transition: all 0.3s ease-in-out;
}
/* Primary */
.bricks-button.bricks-background-primary{
    border: none;
background: transparent;
    color: var(--color-white);
}
.bricks-button.bricks-background-primary::before,
.bricks-button.bricks-background-primary::after {
content: '';
position: absolute;
inset: 0;
z-index: -1;
transition: all 0.3s ease-in-out;

}

.bricks-button.bricks-background-primary::before {
background-image: linear-gradient(98deg,
        var(--color-cerulean-blue) 0%,
        var(--color-cerulean) 100%);
}

.bricks-button.bricks-background-primary::after {
opacity: 0;
visibility: hidden;
background-image: linear-gradient(0deg, rgba(32, 32, 32, 0.24) 0%, rgba(32, 32, 32, 0.24) 100%), linear-gradient(98deg,
        var(--color-cerulean-blue) 0%,
        var(--color-cerulean) 100%);
}


.bricks-button.bricks-background-primary:focus-visible {
outline: 0.2rem solid var(--color-cerulean-blue);
outline-offset: 0.3rem;
}

@media (min-width: 991px) {
.bricks-button.bricks-background-primary:hover::after {
    opacity: 1;
    visibility: visible;
}
}

/* Outline + Light */
.brxe-form [type="submit"].bricks-background-light,
.bricks-button.outline.bricks-color-light{
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 2px solid;
color: #fff;
}
.brxe-form [type="submit"].bricks-background-light:hover,
.bricks-button.outline.bricks-color-light:hover{
    background: rgba(255, 255, 255, 0.38);

}
/* Dark */
.bricks-button.bricks-background-dark{
background: var(--color-neutral-lightest);
color: var( --color-neutral-darkest);
}
.bricks-button.bricks-background-dark:hover{
 background: var( --color-neutral-darkest);
 background: var(--color-cerulean-blue);
color: var( --color-white);
}



/* Sizes */
.bricks-button:not(.sm){
  min-height: 4.4rem;
}

.bricks-button.md{
font-size: var(--fs-text-rg);
font-weight: 500;
padding: 1rem 2.4rem;

}
.bricks-button.lg{
   font-weight: 700;
font-size: var(--fs-h5);
 padding: 1.2rem 2.4rem;
}
.bricks-button.xl{
   font-weight: 700;
font-size: var(--fs-h5);
padding: 1.6rem 2.4rem;
}
@media (max-width: 767px){
.bricks-button{
    font-size: var(--fs-text-rg);
    font-weight: 500;
}
}

/*=======FORM FIELDS========*/
.brxe-form .form-group label{
color:var(--color-text);
font-family: Roboto;
font-size: var(--fs-text-sm);
font-style: normal;
font-weight: 400;
line-height: 150%;
text-transform: none;
}
.brxe-form .form-group label::after{
color:#E42027;
}
.brxe-form .form-group input,
.brxe-form .form-group textarea{
display: flex;
min-height: 44px;
align-items: center;
gap: 8px;
align-self: stretch;
border-radius: var(--radius-md);
border: 1px solid #E2E8F0;
background-color: #F1F1F1;
box-shadow: var(--xs-x, 0) var(--xs-y, 1px) var(--xs-blur, 2px) var(--xs-spread, 0) var(--xs-color, rgba(0, 0, 0, 0.05));
transition: all 0.3s ease-in-out;
}
.brxe-form .form-group input::placeholder,
.brxe-form .form-group textarea::placeholder{
color:var(--color-neutral);
}
.brxe-form .form-group input:hover,
.brxe-form .form-group textarea:hover{
background-color: #E3E5E7;
}

.brxe-form .form-group input:focus,
.brxe-form .form-group textarea:focus{
outline: none;
border-color: #94A2B8;
background: #E3E5E7;
box-shadow: 0 0 0 3px var(--focus-ring, #CBD5E1);
}