attachment-row {
	display: flex;
	flex-direction: column;
	gap: 2px;
	
	&[hidden] {
		display: none;
	}

	& > .head {
		display: flex;
		align-items: center;

		.twisty {
			width: 8px;
			height: 8px;
			margin: 4px;
			align-self: flex-start;

			@include comfortable {
				padding-block: 2px;
			}

			@include svgicon("chevron-8", "universal", "8");
			fill: var(--fill-secondary);
			
			transform: rotate(0deg);
			transform-origin: center;
			transition: transform 0.2s ease-in-out;
		}
		
		.clicky-item {
			@include clicky-item;
			flex: 1;
		}
	}
	
	&[open]:not([empty]) > .head .twisty {
		transform: rotate(-180deg);
	}

	&[empty] > .head .twisty {
		fill: var(--fill-tertiary);
	}
	
	&.context > .head .label {
		// TODO This color is used in virtualized-table - probably want to change to something theme-defined
		color: gray;
	}

	& > .body {
		display: flex;
		flex-direction: column;
		gap: 8px;

		max-height: var(--open-height, auto);
		opacity: 1;
		transition: max-height 0.2s ease-in-out, opacity 0.2s ease-in-out;
	}

	&:not([open]) {
		& > .body {
			max-height: 0;
			opacity: 0;
			visibility: hidden;
			overflow-y: hidden;
			transition: max-height 0.2s ease-in-out, opacity 0.2s ease-in-out, visibility 0s 0.2s, overflow-y 0s 0.2s;
		}
	}
}