.podcast-episode-list-view-popover {
	background-color: $background-white;
	border-radius: 4px;
	box-shadow: $box-shadow;

	.panel-element {
		cursor: pointer;

		label {
			color: $foreground-black;
			cursor: pointer;
			text-transform: none;
		}
	}
}

.panels-header {
	grid-area: panels-header;
}

.podcasts-view {
	display: grid;
	flex-grow: 1;
	grid-column-gap: $gutters / 2;
	grid-template-areas:
		'panels-header border content-header'
		'panels border content';
	grid-template-columns: 1fr auto 2fr;
	grid-template-rows: auto 1fr;
	height: 100%;
	max-width: 100%;
	overflow-y: hidden;
	padding: 0 ($gutters / 2);

	.featured-podcast {
		label {
			color: $foreground-black;
		}

		> * {
			margin-bottom: 2em;
		}
	}

	.panels {
		grid-area: panels;
		min-width: 0;
		overflow-y: scroll;

		&.featured-description {
			font-size: 15px;

			label {
				font-size: 11px;
				font-weight: bold;
			}

			h1 {
				font-size: 25px;
				font-weight: bold;
			}
		}
	}

	&.featured {
		grid-template-areas:
			'featured border content-header'
			'featured border content'
			'desc border content';
		grid-template-columns: 1fr auto 2fr;
		grid-template-rows: 101px 101px auto;
		padding-top: 2em;

		.panels-header {
			grid-area: featured;
		}

		.panels {
			grid-area: desc;
		}
	}

	.border {
		background: linear-gradient(to top, #ebebeb, #f7f7f7);
		grid-area: border;
		width: 5px;
	}

	.content {
		grid-area: content;
		overflow-y: scroll;
	}

	.content-header {
		grid-area: content-header;
	}

	.alignment-box {
		margin-top: 1.7em;
	}
}

.podcast-episode {
	cursor: pointer;
	position: relative;

	.left {
		position: relative;

		.play-icon,
		.pause-icon {
			align-items: center;
			display: flex;
			height: 79px;
			justify-content: center;
			left: 0;
			position: absolute;
			right: 0;
			top: 0;

			.icon-container {
				align-items: center;
				background-color: $background-black;
				border-radius: 10000px;
				display: flex;
				height: 3em;
				justify-content: center;
				width: 3em;
			}
		}

		.play-icon {
			display: none;
			transition-duration: 0.2s;
			transition-property: margin-left;

		}
	}

	.description {
		font-size: 14px;
		line-height: 20px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 100%;
	}

	&:hover {
		.left {
			.play-icon {
				display: flex;
			}
		}
	}
}
