@sixbell-telco/sdk/assets/styles/combobox.css

A collection of reusable components designed for use in Sixbell Telco Angular projects

@import '@ng-select/ng-select/themes/default.theme.css';

/* general */
.ng-select .ng-select-container .ng-value-container {
	padding-left: 0px !important;
}

/* combobox primary */
.ng-select.ng-select-focused:not(.ng-select-opened).combobox-primary > .ng-select-container {
	border: 1px solid var(--fallback-p, oklch(var(--p)));
	box-shadow: none;
}

.ng-select.ng-select-opened.ng-select-bottom.combobox-primary > .ng-select-container {
	border-bottom-left-radius: var(--rounded-box, 1rem);
	border-bottom-right-radius: var(--rounded-box, 1rem);
	border-color: var(--fallback-p, oklch(var(--p) / var(--tw-border-opacity)));
	box-shadow: none;
	outline: 2px solid var(--fallback-p, oklch(var(--p) / 1));
	outline-offset: 2px;
	--tw-border-opacity: 1;
	--tw-ring-color: transparent;
}
/* end combobox primary */

/* combobox secondary */
.ng-select.ng-select-focused:not(.ng-select-opened).combobox-secondary > .ng-select-container {
	border: 1px solid var(--fallback-s, oklch(var(--s)));
	box-shadow: none;
}

.ng-select.ng-select-opened.ng-select-bottom.combobox-secondary > .ng-select-container {
	border-bottom-left-radius: var(--rounded-box, 1rem);
	border-bottom-right-radius: var(--rounded-box, 1rem);
	border-color: var(--fallback-s, oklch(var(--s) / var(--tw-border-opacity)));
	box-shadow: none;
	outline: 2px solid var(--fallback-s, oklch(var(--s) / 1));
	outline-offset: 2px;
	--tw-border-opacity: 1;
	--tw-ring-color: transparent;
}
/* end combobox secondary */

/* combobox success */
.ng-select.ng-select-focused:not(.ng-select-opened).combobox-success > .ng-select-container {
	border: 1px solid var(--fallback-su, oklch(var(--su)));
	box-shadow: none;
}

.ng-select.ng-select-opened.ng-select-bottom.combobox-success > .ng-select-container {
	border-bottom-left-radius: var(--rounded-box, 1rem);
	border-bottom-right-radius: var(--rounded-box, 1rem);
	border-color: var(--fallback-p, oklch(var(--su) / var(--tw-border-opacity)));
	box-shadow: none;
	outline: 2px solid var(--fallback-p, oklch(var(--su) / 1));
	outline-offset: 2px;
	--tw-border-opacity: 1;
	--tw-ring-color: transparent;
}
/* end combobox success */

/* combobox warning */
.ng-select.ng-select-focused:not(.ng-select-opened).combobox-warning > .ng-select-container {
	border: 1px solid var(--fallback-wa, oklch(var(--wa)));
	box-shadow: none;
}

.ng-select.ng-select-opened.ng-select-bottom.combobox-warning > .ng-select-container {
	border-bottom-left-radius: var(--rounded-box, 1rem);
	border-bottom-right-radius: var(--rounded-box, 1rem);
	border-color: var(--fallback-p, oklch(var(--wa) / var(--tw-border-opacity)));
	box-shadow: none;
	outline: 2px solid var(--fallback-p, oklch(var(--wa) / 1));
	outline-offset: 2px;
	--tw-border-opacity: 1;
	--tw-ring-color: transparent;
}
/* end combobox warning */

/* combobox error */
.ng-select.ng-select-focused:not(.ng-select-opened).combobox-error > .ng-select-container {
	border: 1px solid var(--fallback-er, oklch(var(--er)));
	box-shadow: none;
}

.ng-select.ng-select-opened.ng-select-bottom.combobox-error > .ng-select-container {
	border-bottom-left-radius: var(--rounded-box, 1rem);
	border-bottom-right-radius: var(--rounded-box, 1rem);
	border-color: var(--fallback-p, oklch(var(--er) / var(--tw-border-opacity)));
	box-shadow: none;
	outline: 2px solid var(--fallback-p, oklch(var(--er) / 1));
	outline-offset: 2px;
	--tw-border-opacity: 1;
	--tw-ring-color: transparent;
}
/* end combobox error */

/* custom-ng-select */
.custom-ng-select .ng-select-container {
	/* Apply Daisy UI classes here */
	display: inline-flex;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	border-width: 1px;
	border-color: var(--fallback-s, oklch(var(--s) / var(--tw-border-opacity)));
	--tw-border-opacity: 0.2;
	height: 3rem;
	min-height: 3rem;
	padding-left: 1rem;
	padding-right: 2.5rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	line-height: 2;
}

.custom-ng-select .ng-arrow-wrapper {
	display: none;
}

.custom-ng-select .ng-dropdown-panel.ng-select-bottom {
	margin-top: 0;
	transition-property: opacity, transform;
	transition-timing-function: ease-in-out;
	transition-duration: 200ms;
}

.custom-ng-select .ng-dropdown-header {
	border-top-left-radius: var(--rounded-box, 1rem);
	border-top-right-radius: var(--rounded-box, 1rem);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-top: 1px solid var(--fallback-s, oklch(var(--s)));
	border-left: 1px solid var(--fallback-s, oklch(var(--s)));
	border-right: 1px solid var(--fallback-s, oklch(var(--s)));
	border-bottom: 0;
	padding: 0;
	box-shadow: var(--tw-shadow-primary);
}

.custom-ng-select .ng-dropdown-panel-items {
	border-bottom-left-radius: var(--rounded-box, 1rem);
	border-bottom-right-radius: var(--rounded-box, 1rem);
	border: 1px solid var(--fallback-s, oklch(var(--s)));
	background-color: var(--fallback-neutral-content, oklch(var(--nc)));
	box-shadow: var(--tw-shadow-primary);
}

.custom-ng-select .ng-select-bottom {
	border: none;
}

.custom-ng-select .ng-option {
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--fallback-neutral, oklch(var(--n)));
}

.custom-ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label,
.custom-ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked .ng-option-label {
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--fallback-neutral, oklch(var(--n)));
}

.custom-ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked {
	background-color: color-mix(in srgb, var(--fallback-s, oklch(var(--s))) 20%, transparent);
}

.custom-ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,
.custom-ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked {
	background-color: color-mix(in srgb, var(--fallback-s, oklch(var(--s))) 70%, transparent);
}

.custom-ng-select .ng-select-bottom .ng-dropdown-header > * > label > * > * > svg {
	width: 20px;
}

/* Additional variant styles follow the same pattern... */

/* custom-ng-select.combobox-primary */
.custom-ng-select.combobox-primary .ng-select-container {
	border-color: var(--fallback-p, oklch(var(--p) / var(--tw-border-opacity)));
	--tw-border-opacity: 0.2;
}

.custom-ng-select.combobox-primary .ng-arrow-wrapper {
	display: none;
}

.custom-ng-select.combobox-primary .ng-dropdown-panel.ng-select-bottom {
	margin-top: 0.5rem;
}

/* ...and so on for each variant */