/**
 * ==============================================
 * Custom scrollbar ---
 * ==============================================
 */

/* ios only */
@supports (-webkit-touch-callout: none) {
	::-webkit-scrollbar{
		overflow-y: auto;
	}
	::-webkit-scrollbar {width: 12px;background-color: transparent !important;}
	::-webkit-scrollbar-track {background-color: transparent !important;}
	::-webkit-scrollbar-thumb {border-radius:8px !important;background-color: #dadee6;background-clip: padding-box;border: 4px solid transparent;}
	::-webkit-scrollbar-button {width: 0;height: 0;}
}

/* other than iOS */
@supports not (-webkit-touch-callout: none) {
	/* 가로 스크롤바 */
	.scroll-wrapper_h {
		overflow-x: scroll;
		-ms-scrollbar-base-color: transparent;
		scrollbar-base-color: transparent;
		background-color: transparent;
		
	}
	.scroll-wrapper_h::-webkit-scrollbar-corner { display: none; }
	.scroll-wrapper_h::-webkit-scrollbar {
		height: 5px;
		background-color: transparent;
	}
	.scroll-wrapper_h::-webkit-scrollbar-track {
		height: 10px;
		background-color: var(--grey04);
		box-shadow: 0 1px 0 0 rgba(218, 222, 230,0.75) inset;
		-webkit-box-shadow: 0 1px 0 0 rgba(218, 222, 230,0.75) inset;
		-moz-box-shadow: 0 1px 0 0 rgba(218, 222, 230,0.75) inset;
	}
	.scroll-wrapper_h::-webkit-scrollbar-thumb {
		height: 4px;
		/*border-right: 10px solid transparent;*/
		/*border-left: 10px solid transparent;*/
		border-radius: 8px;
		background-color: var(--grey111);
		background-clip: padding-box;
	}

	/* 세로 스크롤바 */
	.scroll-wrapper {
		overflow-y: auto;
	}
	.scroll-wrapper::-webkit-scrollbar-corner { display: none; }
	.scroll-wrapper::-webkit-scrollbar {
		width: 7px;
		/*background-color: transparent;*/
	}
	.scroll-wrapper::-webkit-scrollbar-track {
		width: 7px;
		/*background-color: transparent;*/
	}
	.scroll-wrapper::-webkit-scrollbar-thumb {
		width: 6px;
		border-top: 12px solid transparent;
		border-bottom: 12px solid transparent;
		border-right: 3px solid transparent;
		border-radius: 2px;
		background: var(--grey10);
		background-clip: padding-box;
		display: block !important;
	}
	.list__container::-webkit-scrollbar-track {
		background-color: transparent;
	}
	.list__container::-webkit-scrollbar-thumb {
		background-color: transparent;
	}
	.list__container::-webkit-scrollbar {
		background-color: transparent;
	}
	.list__container::-webkit-scrollbar-corner {
		display: none;
	}
	/* 말풍선 내에 스크롤 바 : 세로 스크롤바 - small */
	.scroll-wrapper2 {
		-ms-scrollbar-base-color: transparent;
		scrollbar-base-color: transparent;
		background-color: transparent;
	}
	.scroll-wrapper2::-webkit-scrollbar-corner { display: none; }
	.scroll-wrapper2::-webkit-scrollbar {
		width: 10px;
		background-color: transparent;
	}
	.scroll-wrapper2::-webkit-scrollbar-track {
		width: 10px;
		background-color: transparent;
	}
	.scroll-wrapper2::-webkit-scrollbar-thumb {
		width: 10px;
		border-right: 3px solid transparent;
		border-left: 3px solid transparent;
		background-color: var(--grey01);
		background-clip: padding-box;
	}
}
@supports (-webkit-touch-callout: none) {
	/* CSS specific to iOS devices */
	.speech__bubble[data-chat-type="list2"] {
		padding: 12px;
	}
	.scroll-wrapper2 {
		-ms-scrollbar-base-color: var(--grey01);
		scrollbar-base-color: var(--grey01);
		background-color: var(--grey01);
		
		scrollbar-width: thin;
		scrollbar-color: #4d7fff #ddd;
	}
	.scroll-wrapper2::-webkit-scrollbar-corner { display: none; }
	.scroll-wrapper2::-webkit-scrollbar {
		width: 12px;
		background-color: var(--grey01);
	}
	.scroll-wrapper2::-webkit-scrollbar-track {
		width: 10px;
		background-color: var(--grey01);
	}
	.scroll-wrapper2::-webkit-scrollbar-thumb {
		width: 8px;
		background-color: var(--grey05);
		background-clip: padding-box;
	}
}


.scroll-wrapper {
	overflow-y: auto;
}
.scroll-wrapper::-webkit-scrollbar {width: 12px;background-color: transparent !important;}
.scroll-wrapper::-webkit-scrollbar-track {background-color: transparent !important;}
.scroll-wrapper::-webkit-scrollbar-thumb {border-radius:8px !important;background-color: #dadee6;background-clip: padding-box;border: 4px solid transparent;}
.scroll-wrapper::-webkit-scrollbar-button {width: 0;height: 0;}


/* bridge - scroll */
.scroll-wrap {
	overflow-y: auto;
}
.scroll-wrap::-webkit-scrollbar {width: 3px !important;}
.scroll-wrap::-webkit-scrollbar-track {background-color: transparent !important;}
.scroll-wrap::-webkit-scrollbar-thumb {border-radius:12px;background-color: #dadee6;background-clip: padding-box;border: 0 solid transparent;border-top: 20px solid transparent;border-bottom: 20px solid transparent;}
.scroll-wrap::-webkit-scrollbar-button {width: 0;height: 0;}

@media screen and (max-width: 640px) {
	.scroll-wrapper {
		overflow-y: auto;
	}
	.scroll-wrapper::-webkit-scrollbar {width: 6px;background-color: transparent !important;}
	.scroll-wrapper::-webkit-scrollbar-track {background-color: transparent !important;}
	.scroll-wrapper::-webkit-scrollbar-thumb {border-radius:8px !important;background-color:#dadee6;background-clip: padding-box;border: 1.5px solid transparent;}
	.scroll-wrapper::-webkit-scrollbar-button {width: 0;height: 0;}

}