.profile-container {
	min-height: 300px;
	padding: 3rem 1rem;
	box-sizing: border-box;

	.profile-sidebar {
		@include mobile {
			overflow: scroll;
		}
		button {
			width: 100%;
			border-radius: 4px;
			color: $bt-light-text;
			background: #fff;
			border: none;
			padding: 0.5rem 1rem;

			display: flex;
			align-items: center;

			margin-bottom: 12px;

			> * {
				vertical-align: middle;
			}

			svg,
			img {
				height: 18px;
				width: 18px;
				outline-color: $bt-light-text;
			}

			span {
				margin-left: 8px;
				line-height: normal;
				font-weight: 600;
				font-size: 14px;
				line-height: 18px;
				white-space: nowrap;
			}

			&.selected {
				color: $bt-primary;
				background: #f8f8f8;
			}

			&:focus {
				text-decoration: none;
			}

			&:hover,
			&:active {
				text-decoration: none;
				background: #f8f8f8;
				cursor: pointer;
			}
		}
	}

	h1 {
		font-weight: bold;
		font-size: 32px;
		margin-bottom: 32px;
	}

	.profile-view-container {
		position: relative;

		.profile-sidebar {
			position: absolute;
			top: 0;
			left: -150px - 32px;
			width: 150px;

			@include mobile {
				position: static;
				display: flex;
				width: 100%;
				margin-bottom: 1rem;
			}
		}

		.profile-view {
			// Prevents weird CSS margin collapse
			display: flex;
			flex-direction: column;
		}
	}

	.profile-subview {
		margin-bottom: 2rem;

		.profile-subview-title {
			display: flex;
			position: relative;
			align-items: center;

			margin-bottom: 1rem;

			h3 {
				font-weight: bold;
				font-size: 24px;
				margin: 0;
			}

			button {
				background-color: Transparent;
				border: none;
			}

			button:focus {
				outline: none;
				box-shadow: none;
			}

			img,
			svg {
				margin-left: 8px;
				height: 28px;
				width: 28px;
				border-radius: 15px;
				padding: 4px 4px 4px 4px;

				transition: all 0.25s ease;

				&:hover {
					background: #fafafa;
					filter: brightness(95%);
				}
			}
		}
	}
}

.profile-row {
	display: flex;
	position: relative;
	align-items: center;
	border-bottom: 1.5px solid #ececec;
	height: 50px;

	a {
		cursor: pointer;
	}
}
