/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

:root {
            }

            html {
                font-size: var(--root-font-size)
            }

            body {
                font-family: "Inter";
                font-size: var(--text-m);
                color: var(--neutral-trans-80)
            }

            h1, h2, h3, h4, h5, h6 {
                color: var(--neutral)
            }

            body.bricks-is-frontend :focus-visible {
                outline: var(--focus-width) solid var(--neutral)
            }

            @supports not selector(:focus-visible) {
                body.bricks-is-frontend :focus {
                    outline: var(--focus-width) solid var(--neutral);
                }
            }

            .brxe-container {
                width: var(--content-width)
            }

            .woocommerce main.site-main {
                width: var(--content-width)
            }

            #brx-content.wordpress {
                width: var(--content-width)
            }

            .bricks-button {
                padding-top: var(--space-xs);
                padding-right: var(--space-m);
                padding-bottom: var(--space-xs);
                padding-left: var(--space-m);
                font-size: var(--text-s);
                font-weight: 600;
                transition: all .2s ease
            }

            :root .bricks-button[class*="primary"] {
                color: var(--white);
                border-radius: var(--radius-xs)
            }

            :root .bricks-button[class*="primary"]:not(.outline) {
                background-color: var(--primary)
            }

            :root .bricks-button[class*="secondary"] {
                border-radius: var(--radius-xs);
                color: var(--white)
            }

            :root .bricks-button[class*="light"]:not(.bricks-lightbox) {
                border-radius: var(--radius-xs);
                color: var(--neutral)
            }

            :root .bricks-button[class*="dark"] {
                border-radius: var(--radius-xs);
                color: var(--white)
            }

            :root .bricks-button[class*="secondary"]:not(.outline) {
                background-color: var(--secondary)
            }

            :root .bricks-button[class*="light"]:not(.outline):not(.bricks-lightbox) {
                background-color: var(--white)
            }

            :root .bricks-button[class*="dark"]:not(.outline) {
                background-color: var(--neutral)
            }

            :root .bricks-button[class*="primary"]:not(.outline):hover {
                background-color: var(--primary-hover)
            }

            :root .bricks-button[class*="light"]:not(.outline):not(.bricks-lightbox):hover {
                background-color: var(--white-trans-90)
            }

            :root .bricks-button[class*="dark"]:not(.outline):hover {
                background-color: var(--neutral-hover)
            }

            html {
                background-color: var(--neutral-trans-10)
            }

            body {
                background: none
            }

            @media (max-width: 767px) {
                .bricks-button {
                    padding-top: var(--space-s);
                    padding-bottom: var(--space-s)
                }
            }