@use '../styles/mixins';

.modula-admin-chip {
	@include mixins.control-label;
	display: inline-flex;
	align-items: center;
	gap: 2px;
	box-sizing: border-box;
	max-width: 100%;
	height: 30px;
	padding: 0 10px;
	border: 1px solid var(--modula-admin-border);
	border-radius: var(--modula-admin-radius-pill);
	background: var(--modula-admin-surface-sunken);
	color: var(--modula-admin-ink);
	font-size: var(--modula-admin-text-control);

	&.is-removable {
		padding-right: 2px;
	}
}

.modula-admin-chip__label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.modula-admin-chip__remove {
	@include mixins.button-reset;
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	color: var(--modula-admin-ink-soft);

	&:focus-visible {
		@include mixins.focus-ring;
		outline-offset: 0;
	}

	&:disabled {
		opacity: var(--modula-admin-disabled-opacity);
		cursor: default;
	}

	&:hover:not(:disabled) {
		@include mixins.list-hover;
		color: var(--modula-admin-ink);
	}
}