/* ====================================================== 
    <!-- Helper Classes -->              
/* ====================================================== */

/*
 * 1. Content Block                     
 * 2. Elements after a floating element will flow around it.
 * 3. Shadow Effect
 * 4. Smooth Transition Effect
 * 5. Element Floating
 * 6. Element Alignment
 * 7. Truncate String with Ellipsis
 * 8. Vertically or Horizontally Aligned Blocks
 * 9. Specifies Whether To Clip Content
 * 10. Specifies a Default Height
 * 11. Hidden The Element on Mobile or Desktop Device
 * 12. Tip Bubble
 * 13. Image Hover Overlay Effects
 * 14. Position
 * 15. Element Hidden Style
 * 16. Border Radius
 * 17. Align Wide and Full Classes For Elements
 * 18. HTML Disclosure Summary element 
*/



/* 
 ---------------------------
 1. Content Block
 ---------------------------
 */ 
.uix-relative {
    position: relative;
	
}

.uix-relative--inline {
	display: inline-block;
	position: relative;
	
	/* Prevent content overflow */
	max-width: 100%;
	
	/* Behave like most inline-block elements */
	vertical-align: middle;
	
	/*
	 * Force hardware acceleration without creating a new stacking context
	 *    to fix 1px glitch when combined with overlays and transitions in Webkit
	 */
	-webkit-backface-visibility: hidden;
	

}

/* Clip child elements */
.uix-relative--inline-clip {
  overflow: hidden;
}


/*----*/
.uix-display-none {
    display: none !important;
}

.uix-display-inline {
    display: inline !important;
}

.uix-display-inline-block {
    display: inline-block !important;
}

.uix-display-block {
    display: block !important;
}

.uix-display-flex {
    display: flex !important;
}

.uix-display-inline-flex {
    display: inline-flex !important;
}

/* The breakpoint is the same as bootstrap 5 */
/*
--breakpoint-xs:0;
--breakpoint-sm:576px;
--breakpoint-md:768px;
--breakpoint-lg:992px;
--breakpoint-xl:1200px;
--breakpoint-xxl:1400px;
*/
@media all and (max-width: 576px) {
    .uix-display-none--sm  {
        display: none !important;
    }
    
    .uix-display-inline--sm  {
        display: inline !important;
    }
    
    .uix-display-inline-block--sm  {
        display: inline-block !important;
    }
    
    .uix-display-block--sm  {
        display: block !important;
    }
    
    .uix-display-flex--sm  {
        display: flex !important;
    }
    
    .uix-display-inline-flex--sm  {
        display: inline-flex !important;
    }
}

@media all and (max-width: 768px) {
    .uix-display-none--md  {
        display: none !important;
    }
    
    .uix-display-inline--md  {
        display: inline !important;
    }
    
    .uix-display-inline-block--md  {
        display: inline-block !important;
    }
    
    .uix-display-block--md  {
        display: block !important;
    }
    
    .uix-display-flex--md  {
        display: flex !important;
    }
    
    .uix-display-inline-flex--md  {
        display: inline-flex !important;
    }
}

@media all and (max-width: 992px) {
    .uix-display-none--lg  {
        display: none !important;
    }
    
    .uix-display-inline--lg  {
        display: inline !important;
    }
    
    .uix-display-inline-block--lg  {
        display: inline-block !important;
    }
    
    .uix-display-block--lg  {
        display: block !important;
    }
    
    .uix-display-flex--lg  {
        display: flex !important;
    }
    
    .uix-display-inline-flex--lg  {
        display: inline-flex !important;
    }
}


@media all and (max-width: 1200px) {
    .uix-display-none--xl  {
        display: none !important;
    }
    
    .uix-display-inline--xl  {
        display: inline !important;
    }
    
    .uix-display-inline-block--xl  {
        display: inline-block !important;
    }
    
    .uix-display-block--xl  {
        display: block !important;
    }
    
    .uix-display-flex--xl  {
        display: flex !important;
    }
    
    .uix-display-inline-flex--xl  {
        display: inline-flex !important;
    }
}

@media all and (max-width: 1400px) {
    .uix-display-none--xxl  {
        display: none !important;
    }
    
    .uix-display-inline--xxl  {
        display: inline !important;
    }
    
    .uix-display-inline-block--xxl  {
        display: inline-block !important;
    }
    
    .uix-display-block--xxl  {
        display: block !important;
    }
    
    .uix-display-flex--xxl  {
        display: flex !important;
    }
    
    .uix-display-inline-flex--xxl  {
        display: inline-flex !important;
    }
}


/* 
 ---------------------------
 2. Elements after a floating element will flow around it. 
    Use the "uix-clearfix" hack to fix the problem
 ---------------------------
 */ 
.uix-clearfix {
	
	&::before {
		display: table;
		content: "";
		line-height: 0;
	}
	
	&::after {
		display: table;
		content: "";
		line-height: 0;
		clear: both;
	}
}


/* 
 ---------------------------
 3. Shadow Effect
 ---------------------------
 */ 
.uix-outer-shadow--regular {
    @include outer-shadow( 'regular' );
}

.uix-outer-shadow--thick {
    @include outer-shadow( 'thick' );
}

.uix-outer-shadow--light {
    @include outer-shadow( 'light' );
}

.uix-outer-shadow--highlight {
    @include outer-shadow( 'highlight', var(--uix-highlight-color1) );
}

.uix-none-shadow {
	box-shadow: none !important;
	text-shadow: none !important;
}

/* 
 ---------------------------
 4. Smooth Transition Effect
 ---------------------------
 */ 
.uix-trans {
    @include transition-default();

    img, 
	a, 
	i, 
	li, 
	span {
        @include transition-default();
    }
}




/* 
 ---------------------------
 5. Element Floating
 ---------------------------
 */ 
.uix-f-l {
    float: left;
}

.uix-f-r {
    float: right;
}


/* 
 ---------------------------
 6. Element Alignment
 ---------------------------
 */ 
.uix-t-r {
    text-align: right;
}

.uix-t-l {
    text-align: left;
}


.uix-t-c {
    text-align: center;
}


/* The breakpoint is the same as bootstrap 5 */
/*
--breakpoint-xs:0;
--breakpoint-sm:576px;
--breakpoint-md:768px;
--breakpoint-lg:992px;
--breakpoint-xl:1200px;
--breakpoint-xxl:1400px;
*/
@media all and (max-width: 576px) {
	.uix-t-r--sm {
		text-align: right;
	}

	.uix-t-l--sm {
		text-align: left;
	}
	.uix-t-c--sm {
		text-align: center;
	}
}

@media all and (max-width: 768px) {
	.uix-t-r--md {
		text-align: right;
	}

	.uix-t-l--md {
		text-align: left;
	}
	.uix-t-c--md {
		text-align: center;
	}
}

@media all and (max-width: 992px) {
	.uix-t-r--lg {
		text-align: right;
	}

	.uix-t-l--lg {
		text-align: left;
	}
	.uix-t-c--lg {
		text-align: center;
	}
}


@media all and (max-width: 1200px) {
	.uix-t-r--xl {
		text-align: right;
	}

	.uix-t-l--xl {
		text-align: left;
	}
	.uix-t-c--xl {
		text-align: center;
	}
}

@media all and (max-width: 1400px) {
	.uix-t-r--xxl {
		text-align: right;
	}

	.uix-t-l--xxl {
		text-align: left;
	}
	.uix-t-c--xxl {
		text-align: center;
	}
}


/* 
 ---------------------------
 7. Truncate String with Ellipsis
 ---------------------------
 */ 
.uix-t-ellipsis {
	@include ellipsis();
}


/* 
 ---------------------------
 8. Vertically or Horizontally Aligned Blocks
 ---------------------------
 */ 

/*-- Using transform property --*/
.uix-v-align--absolute,
.uix-v-align--relative {
    position: absolute;
    z-index: 6;
    width: 100%;
	/* Vertical Center */
	top: 50%;
	transform: translateY(-50%);
	
	/* Vertical Bottom */
	&.uix-v-align--absolute--b {
		top: auto;
		bottom: 0;
		transform: translateY(0);	
	}

	/* Vertical Top */
	&.uix-v-align--absolute--t {
		top: 0;
		transform: translateY(0);	
	}	
}

.uix-v-align--relative {
    position: relative;
}


@media all and (max-width: 768px) {
	.uix-v-align--relative {
		top: 0;
		transform: none;
	}
}

/*-- Using table --*/
.uix-v-align--table {
	display: table;
	width: 100%;
	height: 100%;
	> div {
		display: table-cell;
		vertical-align: middle;
	}
	
	/* Vertical Bottom */
	&.uix-v-align--table--b > div {
		vertical-align: bottom;
	}

	/* Vertical Top */
	&.uix-v-align--table--t > div {
		vertical-align: top;
	}	
	
}


/* 
 ---------------------------
 9. Specifies Whether To Clip Content
 ---------------------------
 */ 
.uix-hidden-scrollbar-x {
    overflow-x: hidden;
}

.uix-hidden-scrollbar {
    overflow: hidden;
}



/* 
 ---------------------------
 10. Specifies a Default Height
 ---------------------------
 */ 
.uix-height--10 {
    height: 10vh !important;
}

.uix-height--20 {
    height: 20vh !important;
}

.uix-height--30 {
    height: 30vh !important;
}

.uix-height--40 {
    height: 40vh !important;
}

.uix-height--50 {
    height: 50vh !important;
}

.uix-height--60 {
    height: 60vh !important;
}

.uix-height--70 {
    height: 70vh !important;
}

.uix-height--80 {
    height: 80vh !important;
}

.uix-height--90 {
    height: 90vh !important;
}

.uix-height--100 {
    height: 100vh !important;
}

@media all and (max-width: 768px) {
	.uix-height--100:not(.is-mobile-still), 
	.uix-height--90:not(.is-mobile-still), 
	.uix-height--80:not(.is-mobile-still), 
	.uix-height--70:not(.is-mobile-still), 
	.uix-height--60:not(.is-mobile-still), 
	.uix-height--50:not(.is-mobile-still), 
	.uix-height--40:not(.is-mobile-still), 
	.uix-height--30:not(.is-mobile-still), 
	.uix-height--20:not(.is-mobile-still), 
	.uix-height--10:not(.is-mobile-still) {
	    height: auto !important;
		
	}
}



/* 
 ---------------------------
 11. Hidden The Element on Mobile or Desktop Device
 ---------------------------
 */ 
@media all and (max-width: 768px) {
    .uix-hide-mobile {
        display: none !important;
    }
}


@media all and (min-width: 769px) {
    .uix-hide-pc {
        display: none !important;
    }
}



/* 
 ---------------------------
 12. Tip Bubble
 ---------------------------
 */ 
.uix-bubble {
	font-weight: 100;
	text-transform: uppercase;
	font-weight: 700;
	line-height: 1.2;
	background: var(--uix-highlight-color1);
	border-radius: 10px;
	padding: .1rem .3rem !important;
	margin-left: .5rem;
	font-size: 0.625rem;
	vertical-align: middle;
	color: #fff !important;
	position: absolute;
	right: 2.3rem;
	top: .5rem;
	transform: scale(.7);
}

@media all and (max-width: 768px) {
	.uix-bubble {
		right: 1rem;
		top: .7rem;
	}

}

/* 
 ---------------------------
 13. Image Hover Overlay Effects
 ---------------------------
 */ 
img.uix-filter-hover--color,
.uix-filter-hover--color img {
	transition: filter .3s cubic-bezier(.445,.05,.55,.95);
    will-change: filter;
	
	&:hover {
		filter: brightness(120%) hue-rotate(45deg);
	}
}



/* 
 ---------------------------
 14. Position
 ---------------------------
 */ 
/*--- Directions --- */
[class*='uix-dir--top'],
[class*='uix-dir--bottom'],
[class*='uix-dir--left'],
[class*='uix-dir--right'],
[class*='uix-dir--center'] {
    position: absolute !important;
}


/* Don't use `width: 100%` because it is wrong if the parent has padding. */
.uix-dir--top {
	top: 0 !important;
    bottom: auto !important;
	left: 0 !important;
	right: 0 !important;
}
.uix-dir--bottom {
    top: auto !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
}
.uix-dir--left {
	top: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
    right: auto !important;
}
.uix-dir--right {
	top: 0 !important;
	bottom: 0 !important;
    left: auto !important;
	right: 0 !important;
}

.uix-dir--top-left {
	top: 0 !important;
    bottom: auto !important;
	left: 0 !important;
    right: auto !important;
}
.uix-dir--top-right {
	top: 0 !important;
    bottom: auto !important;
    left: auto !important;
	right: 0 !important;
}
.uix-dir--bottom-left {
    top: auto !important;
	bottom: 0 !important;
	left: 0 !important;
    right: auto !important;
}
.uix-dir--bottom-right {
    top: auto !important;
	bottom: 0 !important;
    left: auto !important;
	right: 0 !important;
}


/* 
 ---------------------------
 15. Element Hidden Style
 ---------------------------
 */ 
.uix-el--transparent {
	opacity: 0;
}
.uix-el--scale {
	transform: scale(0);
}
.uix-el--skew {
    transform: skew(0deg, -5deg);	
}

/* 
 ---------------------------
  16. Border Radius
 ---------------------------
 */ 
.uix-border--rounded {
	
	border-radius: 4px;
	
	&.uix-border--rounded-img {
		> img {
			border-radius: 4px;
		}		
	}
	
	&.uix-border--rounded-only-img {
		border-radius: 0;
		> img {
			border-radius: 4px;
		}		
	}	
	

}

.uix-border--circle {
	border-radius: 50%;
	
	&.uix-border--circle-img {
		> img {
			border-radius: 50%;
		}		
	}
	
	&.uix-border--circle-only-img {
		border-radius: 0;
		> img {
			border-radius: 50%;
		}		
	}	
}



/* 
 ---------------------------
 17. Align Wide and Full Classes For Elements
 ---------------------------
 */ 
img.uix-alignfull,
.uix-alignfull img {
	margin-left: calc( -100vw / 2 + 100% / 2 );
	margin-right: calc( -100vw / 2 + 100% / 2 );
	max-width: 100vw;
	width: 100vw !important;
	height: auto;
}


/* 
 ---------------------------
 18. HTML Disclosure Summary element 
 ---------------------------
 */ 
details.uix-details-reset {
    &:not([open]) > *:not(summary){
        display: none !important;
    }
    
    > summary {
        cursor:pointer;
        list-style:none;
        &::before{
            display:none;
        }
        &::-webkit-details-marker{
            display:none;
        }  
    }
   
}