/* ======================================================
    <!-- Accordion Background Images -->
/* ====================================================== */
@import '@uixkit/core/_global/scss/mixins';
@import '@uixkit/core/_global/scss/functions';
@import '@uixkit/core/_global/scss/variables';

// Accordion Height
$accordion-img-height: 250px;

.uix-accordion-img {

	width: 100%;
	height: $accordion-img-height;
	overflow: hidden;

	> ul {

		width: 100%;
		display: table;
		table-layout: fixed;
		margin: 0;
		padding: 0;
		font-size: 0; /*Fighting the Space Between Inline Block Elements*/

		> li {
			display: table-cell;
			vertical-align: bottom;
			position:  relative;
			width: 16.66666666666667%; // 6 into 100
			height: $accordion-img-height;
			font-size: 1rem;/*Fighting the Space Between Inline Block Elements*/
			z-index: 1;

			background-position: center center;
			background-repeat: no-repeat;


			@include transition-default();

			> img {
				position: absolute;
				left: 0;
				top: 0;

			}

			> .uix-accordion-img__content {
				display: block;
				height: $accordion-img-height;
				width: 100%;
				vertical-align: bottom;
				padding: 1rem 2.5rem;
				box-sizing: border-box;
				color: #fff;
				cursor: pointer;
				@include transition-default();

				h3,
				p {
					position: relative;
					z-index: -1;
					word-break: break-all;
				}



				.uix-accordion-img__close {
					position: absolute;
					right: 10px;
					top: 10px;
					z-index: 2;
					display: inline-block;
					background: rgba(255,255,255,.2);
					color: #fff;
					border-radius: 15px;
					width: auto;
					font-size: 0.75rem;
					padding: 0 1rem;

				}


			}

			&.is-active {
				width: 60%;
			}


			&.is-active.active-sub {

				> .outer {

					h3,
					p {
						@include ellipsis();
					}
				}


			}

		}




	}

}
// Stack items
@media all and (max-width:  768px) {

	.uix-accordion-img {

		height: auto;

		> ul,
		> ul:hover {

			> li,
			> li:hover {

				position: relative;
				display: table;
				table-layout: fixed;
				width: 100%;
				transition: none;

			}

		}

	}

}