/*------------------------------------*\
    		$showcase-banner CSS 
\*------------------------------------*/
:root {
	--default-text-color: #a7a7a7;
	--active-text-color: #fff;
	--active-progressbar-color: #82be0f;
	--progressbar-color: #555555;
}

._showcase-banner-wrapper .progress-bar {
	position: absolute;
	top: 0;
	left: 0;
	height: 5px;
	width: 100%;
	background: var(--progressbar-color);
}

._showcase-banner-wrapper .progress-bar__fill {
	width: 0;
	height: inherit;
	background: var(--active-progressbar-color);
}

._showcase-banner-wrapper nav-item-wrapper {
	display: flex;
	flex-direction: row;
	gap: 1rem;
	min-height: 5px;
}

._showcase-banner-wrapper nav-item-wrapper nav-item {
	position: relative;
	display: flex;
	flex-direction: column;
	cursor: pointer;
	width: 100%;
	color: var(--default-text-color);
}

._showcase-banner-wrapper nav-item-wrapper nav-item .title {
	font-size: calc(0.25vw + 15.2px);
	text-align: center;
	font-weight: 500;
}

._showcase-banner-wrapper nav-item-wrapper nav-item:hover .title,
._showcase-banner-wrapper nav-item-wrapper nav-item:hover .description,
._showcase-banner-wrapper nav-item-wrapper nav-item.banner-slider-nav-item_active .description {
	color: var(--active-text-color);
}

._showcase-banner-wrapper nav-item-wrapper nav-item.banner-slider-nav-item_active .title {
	color: var(--active-progressbar-color);
}

/*------------------------------------*\
    		slick CSS 
\*------------------------------------*/
._showcase-banner-wrapper .slick-prev,
._showcase-banner-wrapper .slick-next {
	height: 40px;
	width: 40px;
	z-index: 10;
}

._showcase-banner-wrapper .slick-prev:before,
._showcase-banner-wrapper .slick-next:before {
	font-size: 40px;
}

._showcase-banner-wrapper .slick-prev {
	left: 0;
}

._showcase-banner-wrapper .slick-next {
	right: 0;
}

._showcase-banner-wrapper .slick-dots li button:before {
	color: var(--progressbar-color);
	opacity: 1;
}

._showcase-banner-wrapper .slick-dots li.slick-active button:before {
	color: var(--active-progressbar-color);
}