.elementor-widget-nk-documents-table {
	--_border-radius: 0.5rem;
	--_padding-inline: var(--nd-space-xs);

	/* Tablet and up */
	@media only screen and (min-width: 768px) {
		--_padding-inline: calc(var(--nd-space-xs) / 3 * 4);

		.col-download {
			width: 15%;
			min-width: min-content;
		}
	}

	table {
		border-collapse: separate;
		border-spacing: 0 0.25rem; /* row gaps */
		text-align: left;
		font-size: initial;
		margin-block-end: 0;

		th,
		td {
			border: none;
			line-height: initial;
			vertical-align: baseline;
		}

		thead {
			/* Extra gap below header - this basically doubles the row gap */
			&::after {
				content: "";
				display: block;
			}
			tr {
				background: var(--e-global-color-primary);
				color: var(--e-global-color-6210a60, #fff);

				th {
					padding: var(--nd-space-xs) var(--_padding-inline, var(--nd-space-xs));
					font-size: var(--e-global-typography-fbfec04-font-size);
					font-weight: var(--e-global-typography-fbfec04-font-weight);
					line-height: var(--e-global-typography-fbfec04-line-height);

					&:first-child {
						border-radius: var(--_border-radius) 0 0 var(--_border-radius);
					}

					&:last-child {
						border-radius: 0 var(--_border-radius) var(--_border-radius) 0;
					}
				}
			}
		}

		tbody {
			tr {
				position: relative;
				background: var(--e-global-color-6210a60, #fff);

				&:nth-child(even) {
					background: var(--e-global-color-b70b285);
				}

				td {
					background: inherit;
					padding: 1rem var(--_padding-inline, var(--nd-space-xs));

					&:first-child {
						border-radius: var(--_border-radius) 0 0 var(--_border-radius);
					}

					&:last-child {
						border-radius: 0 var(--_border-radius) var(--_border-radius) 0;
					}
				}

				&:hover :is(th, td) {
					background: inherit;
				}
			}
		}
	}

	.col-name {
		.col-name__inner {
			display: inline-flex;
			align-items: flex-start;
			gap: 0.5rem;
		}

		svg {
			flex: none;
			width: 1rem;
			height: max(1rem, 1lh);
			aspect-ratio: 1;
		}
	}

	.nk-documents-table__download {
		display: inline-flex;
		color: var(--e-global-color-primary);
		border-radius: 100vw;
		aspect-ratio: 1;
		background: transparent;
		padding: 0.625rem;
		transition: all 0.3s;

		&:is(:hover, :focus-visible) {
			background-color: var(--e-global-color-primary);
			color: var(--e-global-color-accent);
		}

		&::after {
			content: "";
			position: absolute;
			inset: 0;
			border-radius: var(--_border-radius);
		}

		svg {
			width: 1.25rem;
			height: auto;
			aspect-ratio: 1;
		}
	}
}