@finqu/cool 1.2.29 → 2.0.2

package/scss/_section.scss

@@ -1,977 +1,735 @@
-// Section
-// ---------------------------------------------------------------------------------------------------------------
-
-.section-container {
-    margin-bottom: $section-spacer;
-
-    @include media-breakpoint-down(sm) {
-        margin-bottom: $section-spacer-mobile;
-    }
-}
-
-.section-subtitle {
-    display: block;
-    margin-bottom: $section-spacer;
-    font-family: $section-header-font-family;
-    font-size: $section-header-font-size;
-    font-weight: $section-header-font-weight;
-
-    @include media-breakpoint-down(sm) {
-        margin-bottom: $section-spacer-mobile;
-    }
-}
-
-.section {
-    margin-bottom: $section-spacer;
-    box-shadow: $section-box-shadow;
-    border-radius: $section-border-radius;
-    border: $section-border-width solid $section-border-color;
-
-    @include media-breakpoint-down(sm) {
-        margin-bottom: $section-spacer-mobile;
-    }
-
-    &:not([class*="order-"]):last-child,
-    &.last-child {
-        margin-bottom: 0;
-    }
-
-    &.section-height-auto {
-        height: auto;
-    }
-
-    &.section-parent {
-        > .section-content {
-            padding: 0;
-        }
-    }
-
-    // Hover
-    &.section-hover {
-        transition: box-shadow 0.1s linear;
-
-        &:hover {
-            box-shadow: $section-hover-box-shadow;
-        }
-    }
-
-    // Guide
-    &.section-guide {
-        &:not(.show-more) {
-            .section-content {
-                @include media-breakpoint-down(md) {
-                    p {
-                        &:not(:first-child) {
-                            display: none;
-                        }
-
-                        &:first-child {
-                            white-space: nowrap;
-                            overflow: hidden;
-                            text-overflow: ellipsis;
-                            margin-bottom: 0;
-                        }
-                    }
-                }
-
-                @include media-breakpoint-up(md) {
-                    [name="guide-read-more"] {
-                        display: none;
-                    }
-                }
-            }
-
-            .guide-videos {
-                @include media-breakpoint-down(md) {
-                    display: none;
-                }
-            }
-        }
-        .guide-content {
-            & + .guide-videos {
-                @include media-breakpoint-down(md) {
-                    margin-top: 20px;
-                }
-            }
-        }
-    }
-
-    // Image
-    .section-image {
-        position: relative;
-        background-color: #ffffff;
-        background-size: cover;
-        background-repeat: no-repeat;
-        overflow: hidden;
-        border-top-left-radius: $section-border-radius;
-        border-top-right-radius: $section-border-radius;
-
-        &.size-sm {
-            min-height: 170px;
-        }
-
-        &.size-md {
-            min-height: 230px;
-        }
-
-        &.size-lg {
-            min-height: 326px;
-        }
-
-        &.darken-image {
-            z-index: 1;
-            &:after {
-                position: absolute;
-                top: 0;
-                right: 0;
-                bottom: 0;
-                left: 0;
-                background-color: rgba(0,0,0,0.15);
-                content: '';
-                z-index: -1;
-            }
-        }
-
-        & + .section-tabs:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-content:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-filters:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-bulk-actions:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-title:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-sub-heading:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-placeholder:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none) {
-            border-top-left-radius: 0;
-            border-top-right-radius: 0;
-        }
-
-        .image-badge {
-            position: absolute;
-            top: 30px;
-            left: -40px;
-            transform: rotate(-40deg);
-            background-color: color('blue');
-            color: #ffffff;
-            box-shadow: 0 0 3px rgba(0,0,0,0.3);
-            text-align: center;
-            letter-spacing: 1px;
-            width: 220px;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            box-sizing: border-box;
-            padding: 10px 0;
-            font-size: 12px;
-
-            .image-badge-content {
-                display: block;
-                width: 145px;
-                height: 18px;
-                margin-left: 28px;
-                text-overflow: ellipsis;
-                overflow: hidden;
-            }
-        }
-    }
-
-    // Video
-    .section-video {
-        height: 100%;
-        background-color: #000000;
-        border-radius: $section-border-radius;
-        overflow: hidden;
-
-        &.size-md {
-            height: 230px;
-        }
-
-        &.size-lg {
-            max-height: 326px;
-        }
-
-        &.has-content {
-            border-bottom-left-radius: 0;
-            border-bottom-right-radius: 0;
-        }
-
-        & + .section-tabs:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-content:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-filters:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-bulk-actions:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-title:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-sub-heading:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-placeholder:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none) {
-            border-top-left-radius: 0;
-            border-top-right-radius: 0;
-        }
-    }
-
-    // Bg
-    &.section-bg {
-        .section-content {
-            background-color: transparent;
-            background-size: cover;
-            background-repeat: no-repeat;
-
-            &.darken-bg {
-                position: relative;
-                z-index: 2;
-
-                &:after {
-                    position: absolute;
-                    top: 0;
-                    right: 0;
-                    bottom: 0;
-                    left: 0;
-                    background-color: rgba(0,0,0,0.15);
-                    content: '';
-                    z-index: -1;
-                }
-            }
-        }
-    }
-
-    // Diviner
-    .section-hr {
-    	background: $section-bg;
-    	padding-top: $section-padding / 2;
-    	padding-bottom: $section-padding / 2;
-
-        &.content-full-width {
-            &:after {
-                margin-left: 0;
-                margin-right: 0;
-            }
-        }
-
-    	&:after {
-    		display: block;
-    		content: '';
-		    height: $section-divider-height;
-		    background: $section-divider-color;
-            margin-left: $section-divider-padding;
-            margin-right: $section-divider-padding;
-    	}
-    }
-
-    // Tabs
-    .section-tabs {
-    	background: $section-tabs-bg;
-    	color: $section-color;
-        border-top-left-radius: $section-border-radius;
-        border-top-right-radius: $section-border-radius;
-
-        & + .section-tabs:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-content:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-filters:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-bulk-actions:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-title:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-sub-heading:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-placeholder:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none) {
-            border-top-left-radius: 0;
-            border-top-right-radius: 0;
-        }
-
-        & + .section-hr {
-            margin-top: -$section-padding / 2;
-            margin-bottom: -$section-padding / 2;
-        }
-
-        > .tabs-container {
-        	display: flex;
-        	align-items: stretch;
-        	flex-wrap: nowrap;
-        	list-style: none;
-        	padding: 0;
-    		margin: 0;
-    		overflow: visible;
-    		//border-bottom: 1px solid $section-tabs-border-color;
-
-        	> .tab-item {
-        		display: flex;
-        		align-items: stretch;
-        		flex-grow: 0;
-        		flex-shrink: 0;
-        		position: relative;
-        		margin: 0;
-                font-family: $font-family-title;
-                font-weight: 600;
-
-        		&:first-child {
-        			> .tab-item-action {
-        				margin-left: $section-tabs-item-margin-x;
-        			}
-        		}
-
-        		&.dropdown-container {
-        			display: none;
-        			&.visible {
-        				display: flex;
-        			}
-        		}
-
-        		> .tab-item-action {
-        			display: flex;
-        			align-items: center;
-        			justify-content: center;
-        			flex-grow: 1;
-        			line-height: 1;
-        			position: relative;
-        			text-align: center;
-        			cursor: pointer;
-        			min-width: $section-tabs-item-min-width;
-        			padding: $section-tabs-item-padding-y 0;
-        			margin-right: $section-tabs-item-margin-x;
-        			color: $section-tabs-color;
-        			border-bottom: $section-tabs-border-width solid transparent;
-
-        			&:hover {
-        				color: $section-tabs-hover-color;
-        				border-color: $section-tabs-border-hover-color;
-        			}
-
-        			&.active {
-        				color: $section-tabs-active-color;
-        				border-color: $section-tabs-border-active-color;
-        			}
-        		}
-
-                > span.tab-item-action {
-                    cursor: default;
-                }
-        	}
-        }
-    }
-
-    // Filters
-    .section-filters {
-    	position: absolute;
-    	visibility: hidden;
-    	flex-wrap: wrap;
-    	background: $section-bg;
-    	color: $section-color;
-    	padding: $section-padding / 2;
-    	box-sizing: border-box;
-    	border-top: $border-width solid $section-divider-color;
-
-        & + .section-tabs:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-content:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-filters:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-bulk-actions:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-title:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-sub-heading:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-placeholder:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none) {
-            margin-top: -$section-border-radius;
-        }
-
-        & + .section-hr {
-            margin-top: -$section-padding / 2;
-            margin-bottom: -$section-padding / 2;
-        }
-
-    	&.active {
-    		display: flex;
-    		position: static;
-    		visibility: visible;
-    	}
-
-    	.filter {
-    		position: absolute;
-    		visibility: hidden;
-    		flex: 0 0 25%;
-            max-width: 25%;
-  			padding: $section-padding / 2;
-  			box-sizing: border-box;
-            @include media-breakpoint-only(md) {
-  				flex: 0 0 50%;
-                max-width: 50%;
-            }
-            @include media-breakpoint-down(sm) {
-  				flex: 0 0 100%;
-                max-width: 100%;
-  			}
-
-  			&.active {
-  				position: static;
-    			visibility: visible;
-  			}
-    	}
-    }
-
-    // Bulk actions
-    .section-bulk-actions {
-        position: absolute;
-        visibility: hidden;
-        flex-wrap: wrap;
-        background: $section-bg;
-        color: $section-color;
-        padding: $section-padding / 2;
-        box-sizing: border-box;
-        border-top: 1px solid $section-divider-color;
-
-        & + .section-tabs:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-content:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-filters:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-bulk-actions:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-title:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-sub-heading:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-placeholder:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none) {
-            margin-top: -$section-border-radius;
-        }
-
-        & + .section-hr {
-            margin-top: -$section-padding / 2;
-            margin-bottom: -$section-padding / 2;
-        }
-
-        &.active {
-            display: flex;
-            position: static;
-            visibility: visible;
-        }
-
-        .bulk-action {
-            display: flex;
-            align-items: center;
-            width: 100%;
-            position: absolute;
-            visibility: hidden;
-            padding: $section-padding / 2;
-            box-sizing: border-box;
-            @include media-breakpoint-down(md) {
-                flex-wrap: wrap;
-                flex-direction: column;
-                align-items: flex-start;
-            }
-
-            &.active {
-                position: static;
-                visibility: visible;
-            }
-
-            .bulk-action-select {
-                display: inline-flex;
-                flex: 1;
-                align-items: center;
-                font-size: 12px;
-                max-width: 200px;
-                width: 100%;
-                @include media-breakpoint-down(md) {
-                    margin-top: 15px;
-                }
-                @include media-breakpoint-up(md) {
-                    margin-left: auto;
-                    margin-right: 10px;
-                }
-
-                & + .bulk-action-actions  {
-                    margin-left: 0;
-                }
-
-                .form-control {
-                    margin-left: 5px;
-                }
-            }
-
-            .bulk-action-actions {
-                @include media-breakpoint-down(md) {
-                    margin-top: 15px;
-                }
-                @include media-breakpoint-up(md) {
-                    margin-left: auto;
-                }
-            }
-        }
-    }
-
-    // Placeholder
-    .section-placeholder {
-        flex-direction: column;
-        flex-grow: 1;
-    	align-items: center;
-    	justify-content: center;
-    	background: $section-bg;
-    	color: $section-color;
-        border-radius: $section-border-radius;
-        padding: $section-padding * 3 $section-padding;
-        overflow-x: auto;
-        box-sizing: border-box;
-
-        & + .section-tabs:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-content:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-filters:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-bulk-actions:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-title:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-sub-heading:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-placeholder:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none) {
-            margin-top: -$section-border-radius;
-        }
-
-        & + .section-hr {
-            margin-top: -$section-padding / 2;
-            margin-bottom: -$section-padding / 2;
-        }
-
-    	.placeholder-icon {
-    		.icon-container {
-    			display: flex;
-    			align-items: center;
-    			justify-content: center;
-    			border-radius: 50%;
-    			width: 100px;
-    			height: 100px;
-    			color: theme-color('medium');
-    			//background-color: $grey-100;
-    			padding: 10px;
-                margin: 0 auto;
-                box-sizing: content-box;
-
-    			.icon {
-    				font-size: 5rem;
-    			}
-    		}
-
-    		& + .placeholder-title,
-    		& + .placeholder-description,
-    		& + .placeholder-action,
-            & + .placeholder-action-secondary {
-    			margin-top: 20px;
-    		}
-    	}
-
-    	.placeholder-title {
-            text-align: center;
-            font-family: $font-family-title;
-            font-weight: 600;
-
-    		& + .placeholder-description {
-    			margin-top: 10px;
-    		}
-
-    		& + .placeholder-action,
-            & + .placeholder-action-secondary {
-    			margin-top: 20px;
-    		}
-    	}
-
-    	.placeholder-description {
-            text-align: center;
-    		color: theme-color('medium');
-
-    		.description {
-    			margin-bottom: 0;
-    		}
-
-    		& + .placeholder-action,
-            & + .placeholder-action-secondary {
-    			margin-top: 20px;
-    		}
-    	}
-
-    	.placeholder-action {
-            text-align: center;
-
-            & + .placeholder-action-secondary {
-                margin-top: 20px;
-            }
-        }
-    }
-
-    // Header
-    .section-title {
-        font-family: $section-header-font-family;
-        font-size: $section-header-font-size;
-        font-weight: $section-header-font-weight;
-        color: $section-header-color;
-        background: $section-header-bg;
-        border-radius: $section-border-radius;
-        padding: $section-padding;
-        align-items: center;
-        display: flex;
-        @include media-breakpoint-down(sm) {
-            display: block;
-        }
-
-        & + .section-tabs:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-content:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none):not(.section-collapse),
-        & + .section-filters:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-bulk-actions:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-title:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-placeholder:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none) {
-            margin-top: -$section-border-radius;
-            // padding-top: 0;
-        }
-
-        & + .section-sub-heading:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none) {
-            margin-top: -$section-border-radius;
-            padding-top: 0;
-        }
-
-        & + .section-collapse.show:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none) {
-            padding-top: $section-border-radius;
-            margin-top: -$section-border-radius;
-        }
-
-        & + .section-hr {
-            margin-top: -$section-padding / 2;
-            margin-bottom: -$section-padding / 2;
-        }
-
-        .title {
-            align-self: center;
-            text-align: left;
-            @include media-breakpoint-down(sm) {
-                display: block;
-            }
-
-            p {
-                font-weight: $font-weight-normal;
-                font-size: $font-size-base;
-            }
-        }
-
-        .actions {
-            color: $section-header-actions-color;
-            font-weight: $font-weight-normal;
-            font-size: $font-size-base;
-            font-family: $font-family-base;
-            margin-left: auto;
-            text-align: right;
-
-            @include media-breakpoint-down(sm) {
-                display: block;
-                text-align: left;
-                margin-top: 15px;
-            }
-        }
-
-        > .title > .icon,
-        > .icon {
-            color: $section-header-icons-color;
-            font-size: $section-header-icons-size;
-            margin-right: 5px;
-        }
-
-        .btn-group,
-        .form-group {
-            margin: 0;
-        }
-
-        & + .section-content {
-            border-top-left-radius: 0;
-            border-top-right-radius: 0;
-        }
-
-        &.inline-actions {
-            display: flex;
-
-            .title {
-                display: flex;
-                flex-direction: column;
-            }
-
-            .actions {
-                display: flex;
-                margin-top: 0;
-                text-align: right;
-            }
-        }
-    }
-
-    .section-sub-heading {
-    	font-family: $section-subheader-font-family;
-        font-size: $section-subheader-font-size;
-        font-weight: $section-subheader-font-weight;
-        color: $section-subheader-color;
-        background: $section-subheader-bg;
-        border-radius: $section-border-radius;
-        padding: $section-padding * 1.5 $section-padding $section-padding / 1.5 $section-padding;
-        align-items: center;
-        display: flex;
-
-        @include media-breakpoint-down(sm) {
-        	display: block;
-        }
-
-        & + .section-tabs:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-content:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none):not(.section-collapse),
-        & + .section-filters:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-bulk-actions:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-title:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-sub-heading:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-placeholder:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none) {
-            margin-top: -$section-border-radius;
-        }
-
-        & + .section-collapse.show:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none) {
-            padding-top: $section-border-radius;
-            margin-top: -$section-border-radius;
-        }
-
-        & + .section-hr {
-            margin-top: -$section-padding / 2;
-            margin-bottom: -$section-padding / 2;
-        }
-
-        .title {
-        	align-self: center;
-	        text-align: left;
-            @include media-breakpoint-down(sm) {
-        		display: block;
-        	}
-
-            p {
-                font-weight: $font-weight-normal;
-                font-size: $font-size-base;
-            }
-        }
-
-        .actions {
-        	color: $section-header-actions-color;
-            font-weight: $font-weight-normal;
-            font-size: $font-size-base;
-            font-family: $font-family-base;
-        	margin-left: auto;
-            text-align: right;
-            @include media-breakpoint-down(sm) {
-            	display: block;
-            	text-align: left;
-            	margin-top: 15px;
-            }
-        }
-
-        > .title > .icon,
-        > .icon {
-        	color: $section-subheader-icons-color;
-            font-size: $section-subheader-icons-size;
-            margin-right: 5px;
-        }
-
-        .btn-group,
-        .form-group {
-            margin: 0;
-        }
-
-        & + .section-content {
-            border-top-left-radius: 0;
-            border-top-right-radius: 0;
-        }
-
-        &.inline-actions {
-            display: flex;
-
-            .title {
-                display: flex;
-                flex-direction: column;
-            }
-
-            .actions {
-                display: flex;
-                margin-top: 0;
-                text-align: right;
-            }
-        }
-    }
-
-    // Content
-    .section-content {
-        flex-direction: column;
-        flex-grow: 1;
-    	background: $section-bg;
-    	color: $section-color;
-        border-radius: $section-border-radius;
-        padding: $section-padding;
-        overflow-x: auto;
-        box-sizing: border-box;
-
-        & + .section-tabs:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-content:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none):not(.section-collapse),
-        & + .section-filters:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-bulk-actions:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-title:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
-        & + .section-placeholder:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none) {
-            margin-top: -$section-border-radius;
-            padding-top: 0;
-        }
-
-        & + .section-sub-heading:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none) {
-            margin-top: -$section-border-radius;
-        }
-
-        & + .section-hr {
-            margin-top: -$section-padding / 2;
-            margin-bottom: -$section-padding / 2;
-        }
-
-        & .section-sub-heading {
-            padding-left: 0;
-            padding-right: 0;
-        }
-
-        & > .section-sub-heading:first-child {
-            padding-top: 0;
-            margin-top: 0;
-        }
-
-        &.section-collapse {
-            position: relative;
-            transition: padding .35s ease, margin .35s ease;
-            overflow: hidden;
-
-            &.show {
-                overflow: visible;
-            }
-
-            .collapse {
-                left: $section-padding;
-                right: $section-padding;
-
-                &.show {
-                    left: auto;
-                    right: auto;
-                }
-            }
-
-            .collapsing {
-                left: auto;
-                right: auto;
-            }
-
-            .collapse,
-            .collapsing {
-
-                .section-hr {
-                    width: 100%;
-                    padding-top: 0;
-                    padding-bottom: 0;
-
-                    &:after {
-                        margin-left: 0;
-                        margin-right: 0;
-                    }
-
-                    &.content-full-width {
-                        position: relative;
-                        margin-left: 0;
-                        margin-right: 0;
-
-                        &:after {
-                            position: absolute;
-                            left: -$section-padding;
-                            right: -$section-padding;
-                        }
-                    }
-                }
-            }
-
-            &:not(.show) {
-                margin-top: 0;
-                padding-top: 0;
-                padding-bottom: 0;
-            }
-        }
-
-        &.section-content-parent {
-            padding: 0;
-        }
-
-        &.no-background {
-            padding: 0;
-            background: transparent;
-        }
-
-        &.attribute-trees {
-            padding: 0;
-            background: transparent;
-            padding: 0;
-            border-radius: 0;
-
-            .attribute-tree {
-                padding: 15px;
-                border-radius: $section-border-radius;
-                background: white;
-                padding: 15px;
-            }
-        }
-
-        & + .section-sub-heading {
-        	border-top-left-radius: 0;
-            border-top-right-radius: 0;
-        }
-
-        .content-full-width {
-            @include media-breakpoint-up(md) {
-                margin-left: -$section-padding;
-                margin-right: -$section-padding;
-            }
-        }
-
-        .section-content-box {
-            padding: $section-padding;
-            border: 1px solid rgba(0,0,0,0.1);
-            border-radius: 3px;
-        }
-
-        .flex-center {
-            display: flex;
-            align-items: center;
-            flex-wrap: wrap;
-        }
-
-        .definition-spacer {
-            height: 20px;
-        }
-
-        .definition {
-            padding: 2px 0;
-            display: flex;
-            flex-wrap: wrap;
-
-            @media (min-width: 500px) {
-                flex-wrap: nowrap;
-            }
-
-            .definition-heading {
-                flex: 0 0 100%;
-                color: theme-color('medium');
-                font-size: 12px;
-
-                @media (min-width: 500px) {
-                    color: $body-color;
-                    font-size: 14px;
-                    flex: 0 1 180px;
-                }
-            }
-
-            .definition-content {
-                flex: 1;
-                order: 1;
-                align-self: center;
-            }
-
-            .definition-edit {
-                order: 2;
-                flex: 0 1 50px;
-            }
-
-            .definition-total {
-                order: 2;
-                text-align: right;
-                flex: 0 1 auto;
-            }
-
-            &.status {
-                padding: 10px;
-
-                .definition-content {
-                    font-size: 30px;
-                }
-
-                .definition-edit {
-                    font-size: 18px;
-                }
-            }
-        }
-
-        p:last-child {
-        	margin-bottom: 0;
-        }
-    }
-}
+@use "variables" as *;
+/* Section ========================================================================== */
+
+@mixin cool-section {
+    .section {
+        display: flex;
+        flex-direction: column;
+        margin-bottom: var(--cool-section-spacer);
+        box-shadow: var(--cool-section-box-shadow);
+        border-radius: var(--cool-section-border-radius);
+        border: var(--cool-section-border-width) solid var(--cool-section-border-color);
+
+        &:has(.select.show) {
+            z-index: var(--cool-zindex-select);
+        }
+
+        @include media-breakpoint-down(sm) {
+            margin-bottom: var(--cool-section-spacer-mobile);
+        }
+
+        &:has(.section-content .expander.expanded) {
+            .section-title.section-title-collapsible {
+                border-bottom-left-radius: 0;
+                border-bottom-right-radius: 0;
+            }
+        }
+
+        &:not([class*="order-"]):last-child,
+        &.last-child {
+            margin-bottom: 0;
+        }
+
+        > * {
+            position: relative;
+
+            &:only-child {
+                border-radius: var(--cool-section-border-radius);
+            }
+
+            &:first-child:not(:only-child) {
+                border-top-left-radius: var(--cool-section-border-radius);
+                border-top-right-radius: var(--cool-section-border-radius);
+            }
+
+            &:last-child:not(:only-child),
+            &.is-last-visible {
+                border-bottom-left-radius: var(--cool-section-border-radius);
+                border-bottom-right-radius: var(--cool-section-border-radius);
+            }
+
+            &:not(:first-child):not(:last-child):not(.is-last-visible) {
+                border-radius: 0;
+            }
+        }
+
+        .section-content:not(.d-none) + .section-content,
+        .section-title + .section-content,
+        .section-filters + .section-content,
+        .section-bulk-actions + .section-content,
+        * + .section-header {
+            padding-top: 0;
+        }
+    }
+
+    .section-container {
+        margin-bottom: var(--cool-section-spacer);
+
+        @include media-breakpoint-down(sm) {
+            margin-bottom: var(--cool-section-spacer-mobile);
+        }
+    }
+
+    .section-title {
+        font-family: var(--cool-section-title-font-family);
+        font-size: var(--cool-section-title-font-size);
+        font-weight: var(--cool-section-title-font-weight);
+        color: var(--cool-section-title-color);
+        background: var(--cool-section-title-bg);
+        padding: var(--cool-section-padding);
+        display: flex;
+        align-items: center;
+        gap: var(--cool-spacing-2);
+        flex-grow: 1;
+
+        @include media-breakpoint-down(sm) {
+            flex-direction: var(--cool-section-title-direction-mobile, column);
+            align-items: var(--cool-section-title-align-mobile, start);
+        }
+
+        .title {
+            display: inline-flex;
+            flex-wrap: wrap;
+            gap: var(--cool-spacing-1);
+            align-items: center;
+
+            p {
+                font-weight: var(--cool-font-weight-bold);
+                font-size: var(--cool-font-size-base);
+                margin: 0;
+            }
+
+            .section-subtitle {
+                flex: 0 0 100%;
+                --cool-section-subtitle-font-family: var(--cool-font-family-base);
+                --cool-section-subtitle-font-size: var(--cool-font-size-base);
+                --cool-section-subtitle-font-weight: var(--cool-font-weight-bold);
+                --cool-section-spacer: 0;
+
+                @include media-breakpoint-down(sm) {
+                    --cool-section-spacer: 0;
+                }
+            }
+        }
+
+        .actions {
+            display: inline-flex;
+            gap: var(--cool-spacing-1);
+            color: var(--cool-section-title-actions-color);
+            font-weight: var(--cool-font-weight-normal);
+            font-size: var(--cool-font-size-base);
+            font-family: var(--cool-font-family-base);
+            margin-left: auto;
+            text-align: right;
+
+            @include media-breakpoint-down(sm) {
+                margin-left: var(--cool-section-title-actions-margin-left-mobile, 0);
+                text-align: var(--cool-section-title-actions-align-mobile, left);
+            }
+        }
+
+        > .icon,
+        > .title > .icon {
+            color: var(--cool-section-title-icons-color);
+            font-size: var(--cool-section-title-icons-size);
+            margin-right: 5px;
+        }
+
+        > .btn-text {
+            --cool-btn-font-family: var(--cool-section-title-font-family);
+            --cool-btn-font-size: var(--cool-section-title-font-size);
+            --cool-btn-font-weight: var(--cool-section-title-font-weight);
+            --cool-btn-line-height: var(--cool-line-height-base);
+            --cool-btn-bg: var(--cool-section-title-bg);
+            --cool-btn-color: var(--cool-section-title-color);
+        }
+
+        .btn-group,
+        .form-group {
+            margin: 0;
+        }
+    }
+
+    .section-subtitle {
+        display: block;
+        margin-bottom: var(--cool-section-spacer);
+        font-family: var(--cool-section-subtitle-font-family);
+        font-size: var(--cool-section-subtitle-font-size);
+        font-weight: var(--cool-section-subtitle-font-weight);
+        color: var(--cool-section-subtitle-color);
+        margin-bottom: var(--cool-section-spacer);
+
+        @include media-breakpoint-down(sm) {
+            --cool-section-spacer: var(--cool-section-spacer-mobile);
+        }
+    }
+
+    .section-content {
+        flex-direction: column;
+        flex-grow: 1;
+        background: var(--cool-section-bg);
+        color: var(--cool-section-color);
+        padding-top: var(--cool-section-padding-top, var(--cool-section-padding));
+        padding-bottom: var(--cool-section-padding-bottom, var(--cool-section-padding));
+        padding-left: var(--cool-section-padding-left, var(--cool-section-padding));
+        padding-right: var(--cool-section-padding-right, var(--cool-section-padding));
+        box-sizing: border-box;
+        overflow: auto;
+
+        &:has(.fr-popup.fr-active) {
+            overflow: visible;
+        }
+
+        &:has(> .table-sticky-actions:only-child),
+        &:has(> .content-full-width-m:only-child > .table),
+        &:has(> .content-full-width:only-child > .table),
+        &:has(> .table:only-child) {
+            padding-top: 0;
+            padding-bottom: 0;
+
+            &:has(> .table.table-responsive) {
+                @include media-breakpoint-down(sm) {
+                    padding-top: var(--cool-section-padding);
+                    padding-bottom: var(--cool-section-padding);
+                }
+            }
+
+            .table {
+                tbody {
+                    tr:last-child {
+                        td:first-child {
+                            border-bottom-left-radius: var(--cool-section-border-radius);
+                        }
+
+                        td:last-child {
+                            border-bottom-right-radius: var(--cool-section-border-radius);
+                        }
+                    }
+                }
+            }
+        }
+
+        &:first-child {
+            &:has(> .table-sticky-actions:only-child),
+            &:has(> .content-full-width-m:only-child > .table),
+            &:has(> .content-full-width:only-child > .table),
+            &:has(> .table:only-child) {
+                padding-top: 0;
+                padding-bottom: 0;
+
+                .table-sticky-actions {
+                    border-radius: var(--cool-section-border-radius);
+                }
+
+                .table {
+                    thead {
+                        tr {
+                            th:first-child {
+                                border-top-left-radius: var(--cool-section-border-radius);
+                            }
+
+                            th:last-child {
+                                border-top-right-radius: var(--cool-section-border-radius);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        &:has(> .content-full-width-m:only-child > .table.table-responsive),
+        &:has(> .content-full-width:only-child > .table.table-responsive),
+        &:has(> .table.table-responsive:only-child) {
+            @include media-breakpoint-down(sm) {
+                padding-top: var(--cool-section-padding);
+                padding-bottom: var(--cool-section-padding);
+            }
+        }
+
+        .content-full-width-m {
+            @include media-breakpoint-down(lg) {
+                margin-inline: calc(-1 * var(--cool-section-padding));
+            }
+        }
+
+        .content-full-width {
+            @include media-breakpoint-up(md) {
+                margin-inline: calc(-1 * var(--cool-section-padding));
+            }
+        }
+
+        p:last-child {
+            margin-bottom: 0;
+        }
+
+        & > .form-group:first-child {
+            margin-top: 1px;
+        }
+
+        & > .form-group:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    .section-collapse {
+        position: relative;
+        overflow: hidden;
+
+        &:not(.show) {
+            display: none;
+        }
+
+        &.show {
+            overflow: visible;
+        }
+    }
+
+    .section-image {
+        position: relative;
+        background: var(--cool-section-bg);
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center;
+        overflow: hidden;
+        aspect-ratio: var(--cool-aspect-ratio, auto);
+        min-height: var(--cool-image-height, auto);
+
+        &.size-xs {
+            --cool-image-height: 120px;
+        }
+
+        &.size-sm {
+            --cool-image-height: 170px;
+        }
+
+        &.size-md {
+            --cool-image-height: 230px;
+        }
+
+        &.size-lg {
+            --cool-image-height: 326px;
+        }
+
+        &.darken-image {
+            &::after {
+                position: absolute;
+                inset: 0;
+                background-color: var(--cool-section-image-darken-bg);
+                content: "";
+                pointer-events: none;
+            }
+        }
+
+        .image-badge {
+            position: absolute;
+            top: 30px;
+            left: -40px;
+            transform: rotate(-40deg);
+            background-color: var(--cool-section-image-badge-bg);
+            color: var(--cool-section-image-badge-color);
+            box-shadow: var(--cool-section-image-badge-shadow);
+            text-align: center;
+            letter-spacing: 1px;
+            width: 220px;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            box-sizing: border-box;
+            padding: var(--cool-section-image-badge-padding);
+            font-size: var(--cool-section-image-badge-font-size);
+
+            .image-badge-content {
+                display: block;
+                width: 145px;
+                height: 18px;
+                margin-left: 28px;
+                text-overflow: ellipsis;
+                overflow: hidden;
+            }
+        }
+    }
+
+    .section-video {
+        height: 100%;
+        background-color: var(--cool-section-bg);
+        overflow: hidden;
+        aspect-ratio: var(--cool-aspect-ratio, auto);
+        height: var(--cool-video-height, auto);
+
+        &.size-md {
+            --cool-video-height: 230px;
+        }
+
+        &.size-lg {
+            --cool-video-height: 326px;
+        }
+
+        &.has-content {
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+    }
+
+    .section-hr {
+        background: var(--cool-section-bg);
+        position: relative;
+
+        & + * {
+            padding-top: var(--cool-section-padding);
+        }
+
+        &::after {
+            display: block;
+            content: "";
+            height: var(--cool-section-divider-height);
+            background: var(--cool-section-divider-color);
+            margin-inline: var(--cool-section-divider-padding);
+        }
+
+        &.content-full-width,
+        &.content-full-width-m {
+            &::after {
+                margin-inline: 0;
+            }
+        }
+    }
+
+    .section-header {
+        display: flex;
+        background-color: var(--cool-section-bg);
+        gap: var(--cool-spacing-2);
+        align-items: stretch;
+        width: 100%;
+        padding-left: var(--cool-spacing-2);
+        padding-right: var(--cool-spacing-2);
+        border-bottom: var(--cool-border-width) solid var(--cool-section-divider-color);
+
+        .section-tabs {
+            --cool-section-tabs-bg: transparent;
+            flex: 1 1 0;
+            min-width: 0;
+            width: 100%;
+            height: auto;
+
+            .tabs-container {
+                height: 100%;
+            }
+        }
+
+        .section-tabs .tabs-container,
+        .section-search {
+            padding-left: 0;
+            padding-right: 0;
+        }
+
+        @include media-breakpoint-up(sm) {
+            .section-search {
+                padding-top: var(--cool-spacing-2);
+                padding-bottom: var(--cool-spacing-2);
+                flex: 0 0 auto;
+                min-width: 200px;
+            }
+        }
+
+        @include media-breakpoint-down(sm) {
+            flex-direction: column;
+            padding-top: var(--cool-spacing-2);
+            padding-bottom: var(--cool-spacing-2);
+
+            &:has(.section-tabs) {
+                padding-top: 0;
+            }
+        }
+    }
+
+    .section-tabs {
+        display: flex;
+        align-items: center;
+        background: var(--cool-section-tabs-bg);
+        color: var(--cool-section-color);
+
+        .tabs-container {
+            display: flex;
+            align-items: stretch;
+            flex-wrap: nowrap;
+            list-style: none;
+            padding: 0 var(--cool-section-tabs-item-gap);
+            margin: 0;
+            gap: var(--cool-section-tabs-item-gap);
+            position: relative;
+            overflow: hidden;
+            flex: 1;
+
+            /* Prevent visual flash by initially hiding potentially overflowing tabs */
+            &:not(.js-initialized) {
+                overflow: hidden;
+
+                /* Use a gradient mask to fade out potentially overflowing content */
+                &::after {
+                    content: "";
+                    position: absolute;
+                    top: 0;
+                    right: 0;
+                    bottom: 0;
+                    width: 60px;
+                    background: linear-gradient(
+                        to left,
+                        var(--cool-section-bg, #fff) 0%,
+                        var(--cool-section-bg, #fff) 30%,
+                        color-mix(in srgb, var(--cool-section-bg, #fff) 80%, transparent) 50%,
+                        transparent 100%
+                    );
+                    pointer-events: none;
+                    z-index: 1;
+                }
+
+                /* Initially hide tabs that are likely to overflow on smaller screens */
+                @media (max-width: 1200px) {
+                    > .tab-item:nth-child(n + 6) {
+                        visibility: hidden;
+                    }
+                }
+
+                @media (max-width: 992px) {
+                    > .tab-item:nth-child(n + 5) {
+                        visibility: hidden;
+                    }
+                }
+
+                @media (max-width: 768px) {
+                    > .tab-item:nth-child(n + 4) {
+                        visibility: hidden;
+                    }
+                }
+
+                @media (max-width: 576px) {
+                    > .tab-item:nth-child(n + 3) {
+                        visibility: hidden;
+                    }
+                }
+            }
+
+            /* Once initialized, let JavaScript control visibility */
+            &.js-initialized {
+                > .tab-item {
+                    visibility: visible;
+
+                    &.invisible {
+                        visibility: hidden;
+                    }
+                }
+            }
+
+            > .tab-item {
+                display: flex;
+                align-items: stretch;
+                flex-grow: 0;
+                flex-shrink: 0;
+                position: relative;
+                margin: 0;
+                font-family: var(--cool-section-tabs-font-family);
+                font-weight: var(--cool-section-tabs-font-weight);
+                padding: 0;
+
+                > .tab-item-action {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    flex-grow: 1;
+                    line-height: 1;
+                    position: relative;
+                    text-align: center;
+                    cursor: pointer;
+                    min-width: var(--cool-section-tabs-item-min-width);
+                    color: var(--cool-section-tabs-color);
+                    padding: var(--cool-section-tabs-item-padding-y) 0;
+                    border-bottom: var(--cool-section-tabs-border-width) solid transparent;
+                    border-radius: 0;
+                    white-space: nowrap;
+
+                    &:hover {
+                        color: var(--cool-section-tabs-hover-color);
+                        border-color: var(--cool-section-tabs-border-hover-color);
+                    }
+
+                    &.active {
+                        color: var(--cool-section-tabs-active-color);
+                        border-color: var(--cool-section-tabs-border-active-color);
+                        font-weight: var(--cool-section-tabs-font-weight-active);
+                    }
+                }
+            }
+        }
+
+        .dropdown-container {
+            display: flex;
+            opacity: 0;
+            visibility: hidden;
+
+            /* Initially hidden until JavaScript determines if needed */
+            &:not(.js-ready) {
+                opacity: 0;
+                visibility: hidden;
+            }
+
+            &.visible {
+                opacity: 1;
+                visibility: visible;
+            }
+        }
+    }
+
+    .section-search {
+        display: grid;
+        grid-auto-flow: column;
+        grid-template-columns: max-content;
+        width: max-content;
+        min-width: 200px;
+        height: fit-content;
+        gap: var(--cool-spacing-1);
+        padding: 0 var(--cool-section-tabs-item-gap);
+
+        @include media-breakpoint-down(sm) {
+            grid-template-columns: auto 1fr auto;
+            width: 100%;
+        }
+
+        // Prevent layout shift
+        > .btn {
+            width: 40px;
+        }
+
+        .select-title {
+            width: 12px;
+        }
+    }
+
+    .section-filters {
+        display: none;
+        flex-wrap: wrap;
+        background: var(--cool-section-filters-bg);
+        color: var(--cool-section-filters-color);
+        padding: var(--cool-spacing-2);
+        gap: var(--cool-grid-gutter-x);
+        box-sizing: border-box;
+
+        &.active {
+            display: flex;
+            border-bottom: var(--cool-border-width) solid var(--cool-section-divider-color);
+
+            @include media-breakpoint-down(md) {
+                flex-direction: column;
+            }
+        }
+
+        .filter {
+            display: none;
+            box-sizing: border-box;
+
+            &.active {
+                display: block;
+            }
+        }
+    }
+
+    .section-bulk-actions {
+        display: none;
+    }
+
+    .section-placeholder {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        align-items: center;
+        justify-content: center;
+        background: var(--cool-section-bg);
+        color: var(--cool-section-color);
+        padding-top: var(--cool-section-padding-top, calc(var(--cool-section-padding) * 3));
+        padding-bottom: var(--cool-section-padding-bottom, calc(var(--cool-section-padding) * 3));
+        padding-left: var(--cool-section-padding-left, calc(var(--cool-section-padding) * 0.5));
+        padding-right: var(--cool-section-padding-right, calc(var(--cool-section-padding) * 0.5));
+        overflow-x: auto;
+        box-sizing: border-box;
+        min-height: 200px;
+
+        .placeholder-icon {
+            .icon-container {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                border-radius: 50%;
+                width: var(--cool-section-placeholder-icon-size);
+                height: var(--cool-section-placeholder-icon-size);
+                color: var(--cool-section-placeholder-icon-color);
+                padding: var(--cool-section-placeholder-icon-padding);
+                margin: 0 auto;
+                box-sizing: content-box;
+
+                .icon {
+                    font-size: var(--cool-section-placeholder-icon-font-size);
+                }
+            }
+
+            & + * {
+                margin-top: var(--cool-section-placeholder-spacing);
+            }
+        }
+
+        .placeholder-title {
+            text-align: center;
+            font-family: var(--cool-section-placeholder-title-font-family);
+            font-weight: var(--cool-section-placeholder-title-font-weight);
+
+            & + .placeholder-description {
+                margin-top: var(--cool-section-placeholder-spacing-sm);
+            }
+
+            & + .placeholder-action,
+            & + .placeholder-action-secondary {
+                margin-top: var(--cool-section-placeholder-spacing);
+            }
+        }
+
+        .placeholder-description {
+            text-align: center;
+            color: var(--cool-section-placeholder-description-color);
+
+            .description {
+                margin-bottom: 0;
+            }
+
+            & + .placeholder-action,
+            & + .placeholder-action-secondary {
+                margin-top: var(--cool-section-placeholder-spacing);
+            }
+        }
+
+        .placeholder-action {
+            text-align: center;
+
+            & + .placeholder-action-secondary {
+                margin-top: var(--cool-section-placeholder-spacing);
+            }
+        }
+    }
+
+    .section-secondary {
+        --cool-section-bg: var(--cool-section-secondary-bg);
+        --cool-section-title-bg: var(--cool-section-secondary-bg);
+    }
+
+    @supports (container-type: inline-size) {
+        .section {
+            @container (max-width: 768px) {
+                --cool-section-padding: var(--cool-section-padding-mobile);
+            }
+        }
+    }
+}
+
+@if $cool-use-component-layer {
+    @layer components {
+        @include cool-section;
+    }
+} @else {
+    @include cool-section;
+}