.k8s-filters-side-panel-container {
	position: absolute;
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.2);
	top: 0;
	left: 0;
	z-index: 10;
}

.k8s-filters-side-panel {
	border-radius: 4px;
	border: 1px solid var(--bg-slate-500);
	background: var(--bg-ink-400);
	box-shadow: -4px 10px 16px 2px rgba(0, 0, 0, 0.2);

	height: 88vh;

	position: absolute;
	width: 320px;
	right: 4px;
	top: 48px;
	z-index: 2;

	.k8s-filters-side-panel-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 8px;
		height: 40px;

		.k8s-filters-side-panel-header-title {
			display: flex;
			align-items: center;
			gap: 8px;
		}
	}

	.k8s-filters-side-panel-body {
		height: calc(100% - 40px);

		.k8s-filters-side-panel-body-header {
			border: 1px solid var(--bg-ink-300);
			border-left: none;
			border-right: none;

			.ant-input {
				height: 40px;
			}
		}

		.k8s-filters-side-panel-body-content {
			display: flex;
			flex-direction: column;

			.added-columns,
			.available-columns {
				padding: 8px;

				.filter-columns-title {
					color: var(--text-slate-50);
					font-family: Inter;
					font-size: 11px;
					font-style: normal;
					font-weight: 500;
					line-height: 18px; /* 163.636% */
					letter-spacing: 0.88px;
					text-transform: uppercase;

					padding: 8px 12px;
					margin-bottom: 8px;
				}

				.added-columns-list,
				.available-columns-list {
					display: flex;
					flex-direction: column;
					gap: 8px;

					.added-column-item,
					.available-column-item {
						color: var(--text-vanilla-100);
						font-family: Inter;
						font-size: 12px;
						font-style: normal;
						font-weight: 400;
						line-height: 20px; /* 142.857% */
						letter-spacing: -0.07px;

						padding: 4px 0px 4px 12px;

						display: flex;
						align-items: center;
						justify-content: space-between;
						gap: 8px;

						cursor: pointer;
					}

					.added-column-item-content,
					.available-column-item-content {
						display: flex;
						align-items: center;
						gap: 8px;
					}
				}
			}

			.horizontal-divider {
				border-top: 1px solid var(--bg-ink-300);
			}
		}
	}
}

.lightMode {
	.k8s-filters-side-panel {
		background-color: var(--bg-vanilla-100) !important;
		color: var(--text-slate-400) !important;

		.added-column-item,
		.available-column-item {
			color: var(--text-slate-400) !important;
		}
	}
}
