/* slack-join — the classroom-connect component.
   Geometry only; color and type come from tokens and voices.
   Markup: templates/components/slack-join.php
   Behavior: scripts/slack-join.js (flips data-state / reveals verify UI) */

slack-join {
	display: block;
	max-width: 36em;

	> [data-when] {
		display: none;
	}

	&[data-state='none'] > [data-when='none'],
	&[data-state='linked'] > [data-when='linked'],
	&[data-state='pending'] > [data-when='pending'] {
		display: grid;
		gap: 0.75em;
	}

	ul {
		margin: 0;
		padding-left: 1.25em;
		display: grid;
		gap: 0.25em;
	}

	.email-row {
		display: flex;
		align-items: center;
		gap: 0.5em;
		flex-wrap: wrap;
	}

	.pe-email {
		padding: 0.25em 0.5em;
		background: var(--fill-auxiliary);
		border-radius: var(--control-radius);
	}

	.copy {
		cursor: pointer;
	}

	details.join-actions {
		margin-top: 0.5em;

		summary {
			cursor: pointer;
			padding: 0.25em 0;
		}
	}

	.actions {
		display: flex;
		gap: 0.75em;
		flex-wrap: wrap;
		margin-top: 0.5em;
	}

	.verify-message {
		margin-top: 0.75em;
		display: grid;
		gap: 0.5em;

		&[hidden] {
			display: none;
		}
	}

	.alt-email-row {
		display: flex;
		gap: 0.5em;
		flex-wrap: wrap;

		&[hidden] {
			display: none;
		}

		input {
			flex: 1 1 16em;
			min-width: 12em;
		}
	}
}