@charset "utf-8";

.content-results-width {
		max-width: 62rem;
}

.matchsheet {
  grid-area: matchsheet;
  display: none;
}

.scorecards-grid {
  grid-area: scorecards;
  display: none;
	justify-content: center;
}

.sidebar {
	display: grid;
  grid-area: sidebar;
}

.pairing-results {
	grid-area: pairing-results;
}

.pairing-info {
	display: flex;
	grid-area: pairing-info;
	justify-content: space-around;
	grid-template-columns: 1fr 1fr 1fr;
	font-size: .9rem;
	font-weight: 700;
	margin-bottom: 1rem;
	background-color: #f9f9f9;
	padding: 1.4rem 0;
	border: 1px solid black;
}

.pairing-info div {
	text-align: center;
}

.pairing-buttons {
	display: grid;
	grid-area: pairing-buttons;
	justify-items: center;
	grid-template-columns: 1fr 1fr 1fr;
	margin-bottom: 1rem;
}

.pairing-buttons div {
	font-size: 0.8rem;
	padding: .5rem 1rem;
	border: 1px solid black;
}

.pairings {
	grid-area: pairings;
}

.content-container-grid {
  display: grid;
	column-gap: 1rem;
  grid-template-areas:
	 "sidebar";
	grid-row-gap: .5rem;
}

.sidebar {
	grid-template-columns: 1fr;
	grid-template-areas:
		"pairing-info"
		"pairing-buttons"
		"pairing-results"
		"pairings";
	align-content: start;
}

.comp-table__stats {
	background-color: #FFF;
}

/* 544px */
@media (min-width: 34em) {
	.sidebar {
		grid-template-columns: 1fr 1fr;
		grid-column-gap: 0.5rem;
		grid-template-areas:
			"pairing-info pairing-info"
			"pairing-buttons pairing-buttons"
			"pairing-results pairings";
	}
}


/* 720px */
@media (min-width: 45em) {
  .matchsheet {
    display: block;
  }

	.pairing-info {
		display: none;
	}

	.pairing-buttons {
		display: none;
	}

  .scorecards-grid {
    display: grid;
  }

	.content-container-grid {
		grid-template-areas:
		 "matchsheet"
		 "scorecards"
		 "sidebar";
	}
}

/* 992px */
@media (min-width: 62em) {
	.content-container-grid {
    grid-template-columns: 2fr 1fr;
		grid-template-areas:
		 "matchsheet sidebar"
		 "scorecards sidebar";
	}

	.sidebar {
		grid-template-columns: 1fr;
		grid-template-areas:
			"pairing-results"
			"pairings";
	}
}

/*===============
 * Responsive media queries for stat table
=================*/
.stat-table--font-size {
	  font-size: 1rem;
}

/* 992px */
@media (min-width: 62em) {
	.stat-table--font-size {
		  font-size: .8rem;
	}
}


/*===============
 * Responsive media queries for pairing box
=================*/
.stat-table__header--responsive-padding-on th:first-child,
.stat-table__body--responsive-padding-on td:first-child {
	padding-left: 3rem;
}

.stat-table__header--responsive-padding-on th:last-child,
.stat-table__body--responsive-padding-on td:last-child {
	padding-right: 3rem;
}

/* 320px */
@media (min-width: 20em) {
	.stat-table__header--responsive-padding-on th:first-child,
	.stat-table__body--responsive-padding-on td:first-child {
		padding-left: 4rem;
	}

	.stat-table__header--responsive-padding-on th:last-child,
	.stat-table__body--responsive-padding-on td:last-child {
		padding-right: 4rem;
	}
}

/* 400px */
@media (min-width: 25em) {
	.stat-table__header--responsive-padding-on th:first-child,
	.stat-table__body--responsive-padding-on td:first-child {
		padding-left: 6rem;
	}

	.stat-table__header--responsive-padding-on th:last-child,
	.stat-table__body--responsive-padding-on td:last-child {
		padding-right: 6rem;
	}
}

/* 480px */
@media (min-width: 30em) {
	.stat-table__header--responsive-padding-on th:first-child,
	.stat-table__body--responsive-padding-on td:first-child {
		padding-left: 8rem;
	}

	.stat-table__header--responsive-padding-on th:last-child,
	.stat-table__body--responsive-padding-on td:last-child {
		padding-right: 8rem;
	}
}

/* 544px */
@media (min-width: 34em) {
	.stat-table__header--responsive-padding-on th:first-child,
	.stat-table__body--responsive-padding-on td:first-child {
		padding-left: 3rem;
	}

	.stat-table__header--responsive-padding-on th:last-child,
	.stat-table__body--responsive-padding-on td:last-child {
		padding-right: 3rem;
	}
}

/* 660px */
@media (min-width: 41.25em) {
	.stat-table__header--responsive-padding-on th:first-child,
	.stat-table__body--responsive-padding-on td:first-child {
		padding-left: 4rem;
	}

	.stat-table__header--responsive-padding-on th:last-child,
	.stat-table__body--responsive-padding-on td:last-child {
		padding-right: 4rem;
	}
}

/* 840px */
@media (min-width: 52.5em) {
	.stat-table__header--responsive-padding-on th:first-child,
	.stat-table__body--responsive-padding-on td:first-child {
		padding-left: 5.5rem;
	}

	.stat-table__header--responsive-padding-on th:last-child,
	.stat-table__body--responsive-padding-on td:last-child {
		padding-right: 5.5rem;
	}
}

/* 992px */
@media (min-width: 62em) {
	.stat-table__header--responsive-padding-on th:first-child,
	.stat-table__body--responsive-padding-on td:first-child {
		padding-left: 3rem;
	}

	.stat-table__header--responsive-padding-on th:last-child,
	.stat-table__body--responsive-padding-on td:last-child {
		padding-right: 3rem;
	}
}