/* Scrollbar Styling */
#test-input::-webkit-scrollbar, 
#highlight-layer::-webkit-scrollbar,
#reference-list::-webkit-scrollbar {
	width: 6px;
}
#test-input::-webkit-scrollbar-track, 
#highlight-layer::-webkit-scrollbar-track,
#reference-list::-webkit-scrollbar-track {
	background: transparent;
}
#test-input::-webkit-scrollbar-thumb, 
#highlight-layer::-webkit-scrollbar-thumb,
#reference-list::-webkit-scrollbar-thumb {
	background: #e2e8f0; 
	border-radius: 10px;
}

/* Match Highlighting */
.regex-match {
    background-color: rgba(79, 70, 229, 0.2);
    border-bottom: 2px solid #4f46e5;
    border-radius: 2px;
}

.regex-match-alt {
    background-color: rgba(16, 185, 129, 0.2);
    border-bottom: 2px solid #10b981;
    border-radius: 2px;
}

.regex-group {
    background-color: rgba(245, 158, 11, 0.2);
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.4);
}

/* Reference Item */
.ref-item {
    transition: background-color 0.2s;
    cursor: pointer;
}
.ref-item:hover {
    background-color: #f8fafc;
}

/* Syncing Overlay and Textarea */
#test-input, #highlight-layer {
    line-height: 1.5;
    letter-spacing: normal;
    font-size: 14px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.caret-right{
    border-style: solid;
	border-color: #153b01;
	border-color: inherit;
	border-width: 0 3px 3px 0;
	display: inline-block;
	padding: 3px;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}

.caret-down {
	border-style: solid;
	border-color: #f1f5f9;
	border-color: inherit;
	border-width: 0 3px 3px 0;
	display: inline-block;
	padding: 3px;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}