sendou.ink/app/features/params/components/WeaponParamsTable.module.css

.container {
	margin-top: var(--s-4);
	width: 100%;
	max-height: 600px;
	overflow: auto;
	align-self: stretch;
}

.hiddenBar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-1-5);
	margin-bottom: var(--s-2);
	padding: var(--s-1-5) var(--s-2);
	background-color: var(--color-bg-high);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-box);
}

.hiddenBarLabel {
	flex-shrink: 0;
	color: var(--color-text-high);
}

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

.hiddenBadgeName {
	font-size: var(--font-2xs);
	max-width: 90px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hideButton {
	position: absolute;
	top: var(--s-1);
	right: var(--s-1);
}

.table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: var(--font-xs);
	text-align: left;

	& tbody {
		& tr:hover {
			background-color: var(--color-bg-high);
		}

		& td {
			padding: var(--s-2) var(--s-3);
			border-bottom: 1px solid var(--color-border);
		}

		& tr:first-child td {
			border-top: 1px solid var(--color-border);
		}
	}
}

.thead {
	position: sticky;
	top: 0;
	z-index: 1;

	& th {
		padding: var(--s-2);
		background-color: var(--color-bg);
	}
}

.paramHeader {
	min-width: 180px;
}

.weaponHeader {
	position: relative;
	min-width: 90px;
	padding: var(--s-2);
	text-align: center;
}

.weaponHeaderContent {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-1);
}

.weaponName {
	font-size: var(--font-2xs);
	max-width: 80px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.categoryHeader {
	background-color: var(--color-bg-high);
	font-weight: var(--weight-bold);
	font-size: var(--font-xs);
	letter-spacing: 0.5px;
	padding: var(--s-1-5) var(--s-2);
}

.paramName {
	font-size: var(--font-xs);
	min-width: 180px;
	vertical-align: top;
}

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

.expandableRow .paramName {
	cursor: pointer;

	&:hover {
		background-color: var(--color-bg-high);
	}
}

.paramNameText {
	flex: 1;
}

.paramInfo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.historyIndicator {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	color: var(--color-accent);
}

.paramCell {
	font-size: var(--font-xs);
	vertical-align: top;
	min-width: 90px;
}

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

.currentValue {
	font-variant-numeric: tabular-nums;
	font-weight: var(--weight-semi);
}

.specialPointKits {
	display: flex;
	flex-direction: column;
	gap: var(--s-0-5);
}

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

.historyBadge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding-inline: var(--s-0-5);
	border-radius: var(--radius-full);
	background-color: var(--color-accent-low);
	color: var(--color-accent);
	font-size: var(--font-xs);
	font-weight: var(--weight-bold);
}

.noValue {
	color: var(--color-text-high);
}

.historyList {
	margin-top: var(--s-1);
	display: flex;
	flex-direction: column;
	gap: var(--s-0-5);
	font-size: var(--font-xs);
	border-top: 1px solid var(--color-border);
	padding-top: var(--s-1);
}

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

.historyVersion {
	color: var(--color-text-high);
	font-size: var(--font-2xs);
	font-style: italic;
	white-space: nowrap;
}

.historyValue {
	font-variant-numeric: tabular-nums;
	color: var(--color-text-high);
	min-width: 1.75rem;
}

.specialPointHistory {
	margin-top: var(--s-1);
	display: flex;
	flex-direction: column;
	gap: var(--s-1-5);
	border-top: 1px solid var(--color-border);
	padding-top: var(--s-1);
}

.specialPointHistoryKit {
	display: flex;
	align-items: flex-start;
	gap: var(--s-1);

	& > div:first-child {
		flex-shrink: 0;
	}
}

.specialPointHistoryKitList {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--s-0-5);
	font-size: var(--font-xs);
}

.legend {
	margin-top: var(--s-3);
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
	font-size: var(--font-2xs);
	color: var(--color-text-high);
}

.legendTitle {
	font-weight: var(--weight-bold);
	color: var(--color-text);
}

.legendItem {
	margin: 0;
	padding-left: var(--s-3);
	position: relative;

	&::before {
		content: "•";
		position: absolute;
		left: var(--s-1);
	}
}