@use '../../variables' as *;

.k-popup {
	margin-top: 0.25rem;
}

.k-clear-value {
	opacity: 0.5;
}

.k-input {
	font-size: var(--k-input-font-size);
	font-weight: var(--k-input-font-weight);
	font-family: var(--k-input-font-family);

	&-inner {
		padding-block: var(--k-input-padding-y) !important;
		padding-inline: var(--k-input-padding-x) !important;
		line-height: var(--k-input-line-height) !important;
	}

	&-button {
		padding-block: var(--k-button-padding-y) !important;
		padding-inline: var(--k-button-padding-x) !important;
		line-height: var(--k-button-line-height) !important;
	}

	&-solid {
		&:focus,
		&:focus-within {
			box-shadow: var(--k-input-focus-box-shadow);
			border-color: transparent;
		}
	}

	& .k-button-solid-base {
		border: none;
		background-color: transparent;
	}
}

.k-list-item {
	position: relative !important;
	padding-block: var(--k-list-item-padding-y) !important;
	padding-inline: var(--k-list-item-padding-x) !important;
	font-size: var(--k-list-item-font-size);
	font-weight: var(--k-list-item-font-weight);
	font-family: var(--k-list-item-font-family);
	line-height: var(--k-list-item-line-height);
	color: var(--k-list-item-color);

	&::before {
		content: '';
		position: absolute;
		inset: 0px;
		color: inherit;
		background-color: currentColor;
		opacity: var(--k-overlay-opacity);
	}

	&:hover {
		background-color: transparent;

		&::before {
			opacity: var(--k-overlay-hover-opacity);
		}
	}

	&:active {
		&::before {
			opacity: var(--k-overlay-active-opacity);
		}
	}

	&.k-selected {
		color: var(--k-list-item-color);
		background-color: transparent;

		&:hover {
			color: var(--k-list-item-color);
			background-color: transparent;
		}
	}

	&.k-focus {
		box-shadow: none;
	}
}

// Theme
.k-input {
	--k-input-font-weight: 400;
	--k-input-font-family: var(--#{$prefix}font-family);

	--k-input-focus-box-shadow: 0px 0px 0px 2px var(--#{$prefix}primary-color);

	&-md {
		--k-input-font-size: 0.875rem;
		--k-input-padding-y: 0.3125rem;
		--k-input-padding-x: 0.75rem;
		--k-input-line-height: 24px;
	}

	&-md &-button {
		--k-button-padding-y: 0.3125rem;
		--k-button-padding-x: 0.5945rem;
	}
}

.k-list {
	&-md &-item {
		--k-list-item-padding-y: 0.375rem;
		--k-list-item-padding-x: 0.75rem;
		--k-list-item-font-size: 0.875rem;
		--k-list-item-line-height: 24px;
	}
}

.k-list-item {
	--k-list-item-font-weight: 400;
	--k-list-item-font-family: var(--#{$prefix}font-family);

	--k-list-item-selected-color: var(--#{$prefix}primary-color);

	--k-overlay-opacity: 0;

	--k-overlay-hover-opacity: 0.08;
	--k-overlay-hover-color: 0;

	--k-overlay-active-opacity: 0.12;
	--k-overlay-active-color: 0;

	&.k-selected {
		--k-list-item-color: var(--#{$prefix}primary-color);

		--k-overlay-opacity: 0.08;
		--k-overlay-hover-opacity: 0.12;
		--k-overlay-active-opacity: 0.16;
	}
}