@use "sass:math";
@import './variables';

.s-chip__close {
	cursor: pointer;
	margin-left: $chip-icon-margin-after;
	margin-right: $chip-icon-margin-before;

	.s-icon {
		font-size: $chip-close-size;
		max-height: $chip-close-size;
		max-width: $chip-close-size;
		user-select: none;
	}

	&:focus,
	&:hover,
	&:active {
		opacity: 0.72;
	}
}

.s-chip {
	border-color: var(--theme-dividers);
	color: var(--theme-text-primary);
	align-items: center;
	cursor: default;
	display: inline-flex;
	line-height: $chip-line-height;
	max-width: 100%;
	outline: none;
	overflow: hidden;
	padding: $chip-padding;
	position: relative;
	text-decoration: none;
	transition-duration: $chip-transition-duration;
	transition-property: box-shadow, opacity;
	transition-timing-function: $chip-transition-fn;
	vertical-align: middle;
	white-space: $chip-white-space;

	&::before {
		background-color: currentColor;
		bottom: 0;
		border-radius: inherit;
		content: '';
		left: 0;
		opacity: 0;
		position: absolute;
		pointer-events: none;
		right: 0;
		top: 0;
	}

	.s-avatar {
		height: $chip-avatar-size;
		min-width: $chip-avatar-size;
		width: $chip-avatar-size;
	}

	.s-icon {
		font-size: $chip-icon-size;
	}

	& > .s-icon,
	& > .s-avatar {
		color: inherit;

		&:first-child {
			margin-left: $chip-icon-margin-before;
			margin-right: $chip-icon-margin-after;
		}

		&:last-child {
			margin-left: $chip-icon-margin-after;
			margin-right: $chip-icon-margin-before;
		}
	}

	@each $name, $size in $icon-sizes {
		&.size-#{$name} {
			border-radius: #{math.div(map-get($size, 'height'), 2)}px;
			font-size: #{map-get($size, 'font-size')}px;
			height: #{map-get($size, 'height')}px;
		}
	}

	&:not(.outlined) {
		@include has-theme-bg {
			color: map-deep-get($material-dark-theme, 'text', 'primary');
		}
	}

	&:not(.selected) {
		background-color: var(--theme-chips);
	}

	&.pill {
		& > .s-avatar {
			height: $chip-pill-avatar-size;
			width: $chip-pill-avatar-size;

			&:first-child {
				margin-left: $chip-pill-avatar-margin-before;
			}

			&:last-child {
				margin-right: $chip-pill-avatar-margin-before;
			}
		}
	}

	&.link {
		cursor: pointer;
		user-select: none;

		&:active {
			@include elevation(2);
		}
	}

	&.outlined {
		border: currentColor solid $icon-outlined-border-width;
		background: transparent;

		&:active::before {
			opacity: $chip-outlined-active-opacity;
		}
	}

	&.label {
		border-radius: $chip-label-border-radius;
	}

	&.disabled {
		opacity: $chip-disabled-opacity;
		pointer-events: none;
		user-select: none;
	}
}