@layer bricks {@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes scrolling{0%{opacity:1}to{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px)}}a.brxe-image{display:inline-block}figure.brxe-image{margin:0}:where(.brxe-image).tag{display:inline-block;height:fit-content;position:relative;width:auto}:where(.brxe-image).caption{overflow:hidden;position:relative}:where(.brxe-image).overlay{position:relative}:where(.brxe-image).overlay:before{bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}:where(.brxe-image):before{border-radius:inherit}:where(.brxe-image) a{border-radius:inherit;position:static;transition:inherit}:where(.brxe-image) picture{border-radius:inherit;transition:inherit}:where(.brxe-image) img{border-radius:inherit;height:100%;position:static!important;transition:inherit;width:100%}:where(.brxe-image) img.bricks-lazy-hidden+figcaption{display:none}:where(.brxe-image) .icon{color:#fff;font-size:60px;pointer-events:none;position:absolute;right:50%;text-align:center;top:50%;transform:translate(50%,-50%);z-index:5}:where(.brxe-image) .bricks-image-caption{background:linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.25) 70%,transparent);bottom:0;color:#fff;font-size:inherit;margin:0;padding:10px 15px;pointer-events:none;position:absolute!important;text-align:center;width:100%;z-index:1}}@layer bricks {.brxe-icon{font-size:60px}svg.brxe-icon{font-size:inherit}}@layer bricks {.brxe-text-link{gap:5px}.brxe-text-link,.brxe-text-link span{align-items:center;display:inline-flex}.brxe-text-link span{justify-content:center}}@layer bricks {.brxe-button{width:auto}}@layer bricks {.brxe-code{width:100%}}@layer bricks {:where(.brxe-heading).has-separator{align-items:center;display:inline-flex;gap:20px}:where(.brxe-heading)>[contenteditable]{display:inline-block;text-decoration:inherit}:where(.brxe-heading) .separator{border-top:1px solid;flex-grow:1;flex-shrink:0;height:1px}} #brxe-bc8253 {z-index: 1; align-items: center} #brxe-83e403 {position: relative} #brxe-481174 {background-color: var(--neutral-ultra-light)} #brxe-778753 { --min: 500px;} #brxe-bc0a4b {row-gap: var(--card-gap)} #brxe-38ea03 {row-gap: calc(var(--content-gap) / 2)} #brxe-839893 {color: var(--neutral-dark)} document.addEventListener('DOMContentLoaded', function() { const buttonThemes = document.querySelectorAll('[data-ui-button-theme]'); const buttonGroups = document.querySelectorAll('[data-ui-button-group]'); function updateVisibility() { buttonThemes.forEach(theme => { const button = theme.querySelector('[data-ui-button]'); if (button) { const computedStyle = window.getComputedStyle(button); const backgroundColor = computedStyle.backgroundColor; const isTransparent = backgroundColor === 'rgba(0, 0, 0, 0)' || backgroundColor === 'transparent'; const buttonStyle = button.getAttribute('data-ui-button-style'); if (isTransparent && buttonStyle === 'outline') { theme.style.display = 'none'; } else { theme.style.display = isTransparent ? 'none' : ''; } } }); buttonGroups.forEach(group => { const visibleThemes = group.querySelectorAll('[data-ui-button-theme]:not([style*="display: none"])'); group.style.display = visibleThemes.length === 0 ? 'none' : ''; }); const groupTypes = ['primary', 'secondary', 'tertiary', 'accent', 'base', 'neutral']; groupTypes.forEach(type => { const group = document.querySelector(`[data-ui-button-group="${type}" i]`); if (group) { const optionBtnOutline = getComputedStyle(document.documentElement).getPropertyValue(`--option-${type}-btn-outline`); if (optionBtnOutline.trim() !== 'on') { const outlineButtons = group.querySelectorAll('[data-ui-button-style="outline" i]'); outlineButtons.forEach(button => { button.style.display = 'none'; }); } else { const outlineButtons = group.querySelectorAll('[data-ui-button-style="outline" i]'); outlineButtons.forEach(button => { button.style.display = ''; }); } } }); } const resizeObserver = new ResizeObserver(updateVisibility); buttonThemes.forEach(theme => resizeObserver.observe(theme)); updateVisibility(); // Initial update}); #brxe-8181c2 {justify-content: space-between} #brxe-012872 {justify-content: space-between} #brxe-9797b3 {display: grid; align-items: initial; grid-template-columns: var(--grid-3); grid-gap: var(--grid-gap)} @media (max-width: 991px) {#brxe-9797b3 {grid-template-columns: var(--grid-1)} }