.section {
	width: 50%;
	min-width: fit-content;
	padding: 2em;
	border-radius: 1em;
	background-color: var(--bg-menu);
	display: flex;
	flex-direction: column;
	gap: 1em;

	/* This is causing duplicate separators when removing sessions/passkeys
	> div:has(+ div) {
		border-bottom: 1px solid #8888;
	}
	*/

	@media (width < 700px) {
		width: calc(100% - 2em);
		min-width: unset;
	}
}

.section:last-child {
	margin-bottom: 2em;
}

.section .item {
	display: grid;
	align-items: center;
	width: 100%;
	gap: 1em;
	text-wrap: nowrap;
	border-top: 1px solid #8888;
	padding-bottom: 1em;
}

.info {
	grid-template-columns: 10em 1fr 2em;

	> :first-child {
		margin-left: 1em;
	}

	> :nth-child(2) {
		text-overflow: ellipsis;
		overflow: hidden;
	}
}

.passkey {
	grid-template-columns: 1fr 1fr 1em 1em;
	padding: 1em 0;

	p:first-child {
		display: grid;
		grid-template-columns: 1em 1em 1fr;
		align-items: center;
		width: 100%;
		gap: 1em;
		text-wrap: nowrap;
	}

	dfn:not(.disabled) {
		cursor: help;
	}

	> button {
		display: contents;
	}
}

.session {
	grid-template-columns: 1fr 15em 15em 1em;

	.current {
		border-radius: 2em;
		padding: 0 0.5em;
		background-color: #337;
	}

	.elevated {
		border-radius: 2em;
		padding: 0 0.5em;
		background-color: #733;
	}

	.logout {
		display: contents;
	}
}

@media (width < 700px) {
	.inline-button-container {
		margin-top: 0;
	}

	.item:is(.passkey, .session) {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding-top: 1em;

		p {
			margin: 0;
		}

		> button {
			display: flex;
		}
	}

	.item.session {
		.timestamp {
			grid-column: 2;
			text-align: right;
		}

		.logout {
			margin-top: 0;
			grid-row: 2;
			grid-column: 1;
		}
	}
}