[data-component="select"] {
	[data-slot="select-select-trigger"] {
		display: flex;
		padding: 4px 8px !important;
		align-items: center;
		justify-content: space-between;
		box-shadow: none;
		transition-property: background-color;
		transition-duration: var(--transition-duration);
		transition-timing-function: var(--transition-easing);

		[data-slot="select-select-trigger-value"] {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		[data-slot="select-select-trigger-icon"] {
			width: 16px;
			height: 16px;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			color: var(--icon-base);
		}

		&:hover,
		&[data-expanded] {
			&[data-variant="secondary"] {
				background-color: var(--button-secondary-hover);
			}
			&[data-variant="ghost"] {
				background-color: var(--surface-raised-base-active);
			}
			&[data-variant="primary"] {
				background-color: var(--icon-strong-active);
			}
		}
		&:not([data-expanded]):focus,
		&:not([data-expanded]):focus-visible {
			&[data-variant="secondary"] {
				background-color: var(--button-secondary-base);
			}
			&[data-variant="ghost"] {
				background-color: transparent;
			}
			&[data-variant="primary"] {
				background-color: var(--icon-strong-base);
			}
		}
	}
}

[data-component="select-content"] {
	min-width: 8rem;
	max-width: 23rem;
	overflow: hidden;
	border-radius: var(--radius-md);
	background-color: var(--surface-raised-stronger-non-alpha);
	padding: 4px;
	box-shadow: var(--shadow-xs-border);
	z-index: 50;
	transform-origin: var(--kb-popper-content-transform-origin);
	pointer-events: none;

	animation: selectContentHide var(--transition-duration)
		var(--transition-easing) forwards;

	@starting-style {
		animation: none;
	}

	&[data-expanded] {
		pointer-events: auto;
		animation: selectContentShow var(--transition-duration)
			var(--transition-easing) forwards;
	}

	[data-slot="select-select-content-list"] {
		overflow-y: auto;
		max-height: 12rem;
		white-space: nowrap;
		overflow-x: hidden;
		display: flex;
		flex-direction: column;
		&:focus {
			outline: none;
		}
		> *:not([role="presentation"]) + *:not([role="presentation"]) {
			margin-top: 2px;
		}
	}
	[data-slot="select-select-item"] {
		position: relative;
		display: flex;
		align-items: center;
		padding: 4px 8px;
		gap: 12px;
		border-radius: var(--radius-sm);

		/* text-12-medium */
		font-family: var(--font-family-sans);
		font-size: var(--font-size-base);
		font-style: normal;
		font-weight: var(--font-weight-medium);
		line-height: var(--line-height-large); /* 166.667% */
		letter-spacing: var(--letter-spacing-normal);
		color: var(--text-strong);

		transition-property: background-color, color;
		transition-duration: var(--transition-duration);
		transition-timing-function: var(--transition-easing);
		outline: none;
		user-select: none;

		&:hover {
			background-color: var(--surface-raised-base-hover);
		}
		&[data-disabled] {
			background-color: var(--surface-raised-base);
			pointer-events: none;
		}
		[data-slot="select-select-item-indicator"] {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: auto;
			width: 16px;
			height: 16px;
			color: var(--icon-strong-base);

			svg {
				color: var(--icon-strong-base);
			}
		}
		&:focus {
			outline: none;
		}
		&:hover {
			background: var(--surface-raised-base-hover);
		}
	}
}

@keyframes selectContentShow {
	from {
		opacity: 0;
		transform: scaleY(0.95);
	}
	to {
		opacity: 1;
		transform: scaleY(1);
	}
}

@keyframes selectContentHide {
	from {
		opacity: 1;
		transform: scaleY(1);
	}
	to {
		opacity: 0;
		transform: scaleY(0.95);
	}
}