.object-damage__controls {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.object-damage__selects {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-5);
}

.object-damage__selects__weapon {
	width: 16rem;
}

.object-damage__ability {
	position: absolute;
}

.object-damage__ap-label {
	display: flex;
	justify-content: center;
	gap: var(--s-1-5);
}

.object-damage__grid {
	column-gap: var(--s-2);
	display: grid;
	max-height: 60vh;
	overflow: auto;
	row-gap: var(--s-2);
	width: 100%;
}

@media screen and (min-width: 431px) {
	.object-damage__grid {
		max-height: 70vh;
	}
}

.object-damage__grid::-webkit-scrollbar {
	width: 4px;
	height: 8px;
}

.object-damage__grid::-webkit-scrollbar-corner {
	background-color: var(--bg-lighter);
}

.object-damage__grid::-webkit-scrollbar-thumb {
	background-color: var(--theme-transparent);
	border-radius: 4px;
}

.object-damage__hp {
	font-size: var(--fonts-xs);
	font-weight: var(--semi-bold);
}

.object-damage__table-header {
	align-items: center;
	background-color: var(--bg-lightest-solid);
	border-radius: var(--rounded);
	display: flex;
	flex-direction: column;
	font-size: var(--fonts-xs);
	font-weight: var(--semi-bold);
	gap: var(--s-1);
	height: 100%;
	left: 0;
	outline: 5px solid var(--bg);
	padding-block: var(--s-2);
	padding-inline: var(--s-2);
	position: sticky;
	text-align: center;
	top: 0;
	white-space: nowrap;
	width: 100%;
}

.object-damage__weapon-image {
	min-width: 24px;
}

.object-damage__distance {
	color: var(--text-lighter);
	font-size: var(--fonts-xxs);
	margin-block-start: var(--s-0-5);
}

.object-damage__receiver-image {
	padding: var(--s-2);
	border-radius: var(--rounded);
	background-color: var(--bg-darker-transparent);
}

.object-damage__table-card {
	display: grid;
	width: 100%;
	height: 100%;
	padding: var(--s-2);
	border-radius: var(--rounded);
	background-color: var(--bg-lighter);
	font-size: var(--fonts-xs);
	font-weight: var(--semi-bold);
	place-items: center;
}

.object-damage__table-card__results {
	display: grid;
	column-gap: var(--s-2);
	grid-template-columns: 1fr 1fr;
	padding-inline: var(--s-2);
}

.object-damage__select {
	width: initial;
	padding-left: 0.5rem;
	padding-right: 1.75rem;
}

.object-damage__abbr {
	color: var(--text-lighter);
	font-weight: var(--bold);
	text-decoration: none;
}

.object-damage__multiplier {
	color: var(--theme);
	font-size: var(--fonts-xxs);
	font-weight: var(--bold);
	letter-spacing: 0.5px;
	margin-block-start: var(--s-2);
}

.object-damage__bottom-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

.object-damage__patch {
	border-radius: var(--rounded);
	background-color: var(--theme-transparent);
	color: var(--text-lighter);
	font-size: var(--fonts-xxxs);
	font-weight: var(--bold);
	padding-block: var(--s-0-5);
	padding-inline: var(--s-1);
}