/*
 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
*/
[data-grid-layout] {
	--padding-inline: var(--site-gutter);
	--content-max-width: var(--site-width);
	--wide-content-max-width: var(--site-wide-content);
	
	--gutter: minmax(var(--padding-inline), 1fr);
	--wide-content-size: calc((var(--wide-content-max-width) - var(--content-max-width)) / 2);
	--wide-content: minmax(0, var(--wide-content-size));
	--content: min(100% - (var(--padding-inline) * 2), var(--content-max-width));
	
	display: grid;
	padding-inline: unset !important;
	grid-template-columns:
		[full-width-start] var(--gutter)
		[wide-content-start] var(--wide-content)
		[content-start] min(100% - (var(--padding-inline) * 2), var(--content-max-width)) [content-end] var(--wide-content)
		[wide-content-end] var(--gutter)
		[full-width-end] ;
	
	> * {
		grid-column: content;
		max-width: unset !important;
	}
}

html {
	scroll-behavior: smooth !important;
	scroll-padding-top: var(--scroll-padding);
}

header {
	&.scrolling .search-bar__container {
		margin-inline-end: var(--search-bar-offset);
	}
	
	&.scrolling .search-bar__container:hover {
		margin-inline-end: unset;
	}
}

section + section {
	padding-block-end: var(--section-padding);
}

[role="list"] {
	list-style: none;
	padding-inline-start: unset;
}

._display--none {
	display: none;
}

._position--absolute {
	position: absolute;
	inset: 0;
}

._panel--compressed {
	inline-size: var(--key-lever-container-block-size) !important;
	
	& .key-lever__description-block {
		block-size: 0;
		visibility: collapse;
		opacity: 0;
	}
}

._panel--expanded {
	inline-size: 100% !important;
}

._slide--left {
	transform: translatex(-100%);
}

.button-primary {
	background-color: hsl(var(--brand-primary));
	color: hsl(var(--brand-action));
	padding-block: var(--button-padding--s);
	padding-inline: var(--button-padding--l);
	border-width: var(--button-border-width);
	border-radius: var(--radius--full);
	border-color: hsl(var(--brand-primary));
}

._flip-effect {
  background-color: transparent;
  isolation: isolate;
  perspective: 1000;
  
  > :nth-child(1) {
    position: relative;
    block-size: 100%;
    inline-size: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    
    > :nth-child(1), > :nth-child(2) {
      position: absolute;
      inset: 0;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }
    
    > :nth-child(2) {
      transform: rotateY(180deg);
    }
  }
}

._flip-effect:hover > :nth-child(1) {
  transform: rotateY(180deg);
}