.attribute-table-container {
	.ant-table {
		background: var(--bg-ink-400);

		.ant-table-row:hover {
			.ant-table-cell {
				.value-field {
					display: flex;
					justify-content: space-between;
					align-items: center;
					.action-btn {
						display: flex;
						gap: 4px;
					}
				}
			}
		}

		.ant-table-cell {
			border: 1px solid var(--bg-slate-500);
		}

		.attribute-name {
			.ant-btn {
				&:hover {
					background-color: none !important;
				}
			}
		}

		.value-field-container {
			background: rgba(22, 25, 34, 0.4);

			.value-field {
				position: relative;
			}

			.action-btn {
				display: none;
				width: max-content;
				position: absolute;
				padding: 0 16px;
				right: 0;

				.filter-btn {
					display: flex;
					align-items: center;
					border: none;
					box-shadow: none;
					border-radius: 2px;
					background: var(--bg-slate-400);

					height: 24px;
				}
			}
		}
	}
}

.lightMode {
	.attribute-table-container {
		.ant-table {
			background: var(--bg-vanilla-100);
		}

		.ant-table-cell {
			border: 1px solid var(--bg-vanilla-200);
		}

		.value-field-container {
			background: var(--bg-vanilla-300);

			.action-btn {
				.filter-btn {
					background: var(--bg-vanilla-300);
				}
			}
		}
	}
}