@import "~scss/_mixins";

.filter { padding: 0px 14px; cursor: text; }
.filter {
	.inner { position: relative; width: 100%; height: 35px; display: flex; align-items: center; gap: 0px 8px; }
	.filterInputWrap { position: relative; width: 100%; }
	.input { padding: 0px !important; height: 28px; line-height: 28px; vertical-align: top; border: 0px !important; background: none; }

	.icon { flex-shrink: 0; cursor: default; }
	.icon.clear { width: 20px; height: 20px; background-image: url('~img/icon/clear0.svg') !important; opacity: 0; }
	.icon.clear:hover { background-image: url('~img/icon/clear1.svg') !important; }
	.icon.search { width: 20px; height: 20px; background-size: 18px; background-image: url('~img/icon/search.svg'); }

	.line { height: 1px; margin: 0px !important; background: var(--color-shape-secondary); display: block; }
}
.filter.isName {
	.input { font-weight: 700; }
	.inputWithLabel .input { font-weight: 600; }
}
.filter.active { 
	.icon.clear { opacity: 1; } 
}
.filter.outlined {
	.inner { height: 30px; padding: 0px 5px 0px 8px; gap: 0px 4px; box-shadow: inset 0 0 0 1px var(--color-shape-secondary); border-radius: 6px; }
	.icon.clear { background-image: url('~img/icon/filter/clear0.svg') !important; }
	.icon.clear:hover { background-image: url('~img/icon/filter/clear1.svg') !important; }
	.line { display: none; }
}
.filter.outlined.isFocused {
	.inner { box-shadow: inset 0 0 0 2px var(--color-system-accent-50); }
}
