.catalog-description-container {
	// We don't want the description container to
	// make the description column giant, so we make
	// it absolute to take it out of the layout flow.
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;

	@include mobile {
		position: relative;
	}

	// (Generally) it shouldn't need to scroll but
	// just in case there's some weird description
	// with giant words. This prevents things from
	// getting cut
	overflow-y: auto;

	.loading {
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.catalog-results-empty {
		padding: 1.5rem;
		font-size: 18px;
		text-align: center;
		color: $bt-light-text;
	}

	.catalog-description {
		height: 100%;
		padding: 30px 0;

		display: block;

		> *:not(section),
		> section > * {
			margin-bottom: 15px;
		}

		> section:not(.description-section),
		.description-section > div {
			padding: 0 30px;
		}

		h3 {
			font-size: 24px;
			font-weight: 700;
		}

		h6 {
			font-size: 18px;
			font-weight: 400;
			color: $bt-light-text;
		}

		.stats {
			display: flex;
			flex-direction: column;

			.statline {
				display: flex;
				flex-direction: row;

				.statline-div {
					display: flex;
				}

				> img {
					width: 14px;
					margin-right: 8px;
				}

				color: $bt-light-text;

				> p {
					color: $bt-light-text;
					margin-left: 5px;
				}

				.statlink {
					opacity: 0.8;
					border-radius: 2px;
					transition: 0.2s;
					padding: 0px 4px;
					line-height: 0;
					padding-top: 4px;

					&:hover {
						cursor: pointer;
						opacity: 1;
						background: $bt-button-background;
					}

					img {
						height: 16px;
						vertical-align: bottom;
					}
				}
			}
		}

		.pill-container {
			overflow-x: auto;

			&::-webkit-scrollbar {
				display: none;
			}

			> div {
				white-space: nowrap;
				display: inline-block;
			}

			.pill {
				display: inline-block;
				margin: 0px 10px 2px 0px;
				padding: 6px 12px;
				white-space: nowrap;
				border: 1px solid $bt-border-grey;
				border-radius: 50vh;
				text-align: center;
				color: $bt-blue;
				font-size: 14px;
				transition: 200ms;

				&:hover {
					cursor: pointer;
					background-color: $bt-button-background;
				}
			}
		}

		.description {
			color: $bt-grey-text;

			span {
				color: $bt-blue;

				&:hover {
					cursor: pointer;
				}
			}
		}

		.prereqs {
			h6 {
				margin-bottom: 10px;
				color: $bt-grey-text;
				font-weight: 700;
				font-size: 1rem;
			}

			span {
				color: $bt-blue;

				&:hover {
					cursor: pointer;
				}
			}
		}

		h5 {
			color: $bt-base-text;
			font-weight: 700;
			margin-top: 10px;
			font-size: 18px;
		}

		.table-container {
			position: relative;
			overflow-x: auto;

			@include mobile {
				overflow-y: scroll;
			}

			div {
				display: inline-block;
				padding: 0 30px;
			}

			.table-empty {
				color: $bt-light-text;
				font-size: 18px;
			}

			table {
				max-width: 100%;
				max-height: 100%;
				margin-bottom: 0;
				color: $bt-base-text;
				font-weight: normal;

				tr {
					transition: 0.2s;
					&:hover {
						background-color: #d4d4d442;
					}

					cursor: var(--section-cursor), pointer;
				}

				thead {
					th {
						font-weight: 700;
						border-top: none;
						border-bottom: none;
						padding: 0.75rem;
						position: sticky;
						background: white;
						transition: 0.2s;
						top: 0;
					}
				}

				td {
					font-weight: 400;
					padding: 0.75rem;
				}
			}
		}
	}
}

.table-container > div {
	overflow-x: scroll;
}
