/**
 * Decorative Component Styles
 *
 * Decorative strips (panel edges) used for visual separation between panels
 * These create the wavy/irregular edges between content sections
 *
 * Dependencies: ssa-base (00-tokens.css for variables)
 * Extracted from: styles.css lines 58-75
 */

/* ==========================================================================
   Panel Edge Strips
   ========================================================================== */

.top-strip {
	background: url('../../img/panel-edge-xl.svg');
	display: inline-block;
	height: 80px;
	width: 100%;
	transform: rotateX(180deg);
	position: relative;
	z-index: 1;
}

.bottom-strip {
	background: url('../../img/panel-edge-xl.svg');
	bottom: 0;
	display: inline-block;
	height: 80px;
	position: absolute;
	width: 100%;
}

/* Note: Some pages override these with different background images
   - content-single-courses.css: uses panel-edge-xl-log.svg for .top-strip
   - content-blog.css: uses panel-edge-xl-log.svg for .top-strip, hides .bottom-strip
   - buying_options_panel.css: hides .bottom-strip
*/