sendou.ink/app/components/match-page/MatchActionTab.module.css

.root {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-areas:
		"header header header"
		"alpha stage bravo"
		"points-alpha ko points-bravo"
		". submit .";
	justify-items: center;
	align-items: center;
	gap: var(--s-4);
}

.title {
	grid-area: header;
	font-size: var(--font-md);
	font-weight: var(--weight-semi);
	text-align: center;
}

.selectionRow {
	display: contents;
}

.teamRadioContainer {
	--label-margin: 0;
	width: 100%;
	max-width: 250px;
}

.alpha {
	grid-area: alpha;
	justify-self: end;
}

.bravo {
	grid-area: bravo;
	justify-self: start;
}

.stageImage {
	grid-area: stage;
	border-radius: var(--radius-box);
}

.pointsAlpha {
	grid-area: points-alpha;
	justify-self: end;
}

.ko {
	grid-area: ko;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-1);
	align-self: flex-end;
}

.pointsBravo {
	grid-area: points-bravo;
	justify-self: start;
}

.submit {
	grid-area: submit;
}

.checkCircle {
	width: 24px;
	height: 24px;
	border-radius: 100%;
	border: 2px solid var(--color-border-high);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.teamRadio {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-1-5) var(--s-3);
	border-radius: var(--radius-field);
	border: 2px solid var(--color-border);
	cursor: pointer;
	background-color: var(--color-bg-high);
	min-width: 160px;
	transition: background-color 0.15s;

	&:hover .checkCircle {
		border-color: var(--color-accent-high);
	}
}

.selected {
	background-color: var(--color-bg-higher);
}

.focusVisible {
	outline: var(--focus-ring);
}

.teamAvatarInfo {
	display: flex;
	align-items: center;
	gap: var(--s-1-5);
}

.checkCircleSelected {
	background-color: var(--color-accent-high);
	border-color: var(--color-accent-high);
	color: var(--color-text-inverse);

	& svg {
		stroke-width: 3px;
	}
}

.teamInfo {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.teamName {
	font-weight: var(--weight-semi);
	font-size: var(--font-sm);
}

.teamLabel {
	font-size: var(--font-3xs);
	font-weight: var(--weight-semi);
}

.myTeamLabel {
	color: var(--color-success-high);
}

.opponentLabel {
	color: var(--color-error-high);
}

.pointsInput {
	width: 60px;
}

.koLabel {
	display: flex;
	align-items: center;
	gap: var(--s-1-5);
	font-weight: var(--weight-semi);
	cursor: pointer;
}

.koHelp {
	font-size: var(--font-3xs);
	color: var(--color-text-high);
	height: auto;
	padding: 0;
	font-weight: normal;
	text-decoration: underline;
}