@import '../../styles/variables.scss';

.root {
	position: relative;
	width: 100%;
	max-width: 350px;

	@include breakpoint-md {
		position: absolute;
		top: 32px;
		right: 72px;
		z-index: 3;
		display: block;
		width: 80px;
		max-width: 100%;
	}
}

.bodyMobile {
	display: none;

	@include breakpoint-md {
		display: block;
	}
}

.bodyDesktop {
	@include breakpoint-md {
		display: none;
	}
}

.modalBodyScroll {
	height: calc(100% - 96px);
	overflow: auto;
}

.button {
	color: $black !important;
	background: $light-grey !important;
	border: 1px solid $light-grey !important;
}

:global(.dark) .button {
	color: $off-white-dark !important;
	background: $dark-grey !important;
	border: 1px solid $dark-grey !important;
}

.firstParagraph {
	margin-top: 8px;
	letter-spacing: 0.2px;
}

.secondParagraph {
	margin-top: 16px;
	margin-bottom: 60px;
	letter-spacing: 0.2px;

	@include breakpoint-md {
		margin-bottom: 24px;
	}
}

:global(.dark) .firstParagraph,
:global(.dark) .secondParagraph {
	color: $white-dark !important;
}

.peopleButton {
	padding: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: $grey;
	text-decoration: underline;
	cursor: pointer;
	background: transparent;
	outline: none;
}

.footer {
	letter-spacing: 0.2px;

	button,
	a {
		color: #424347;
		text-decoration: none;
		transition: all 0.2s ease;

		&:hover {
			color: $link;
		}
	}

	@include breakpoint-md {
		margin-top: 12px;
	}
}

:global(.dark) .footer {
	button,
	a {
		color: $white-dark;

		&:hover {
			color: $off-white-dark;
		}
	}
}

.overlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10;
	background-color: rgba($light-grey, 0.64);
}

:global(.dark) .overlay {
	background-color: rgba($black, 0.8);
}

.content {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	max-width: 730px;
	height: 100%;
	max-height: 568px;
	padding: 0;
	overflow: auto;
	background: $white;
	border: none;
	border-radius: 8px;
	outline: none;
	box-shadow: 0 2px 4px rgba($black, 0.12);
	transform: translate(-50%, -50%);
	-webkit-overflow-scrolling: touch;

	@include breakpoint-md {
		height: 100%;
		max-height: 100vh;
		padding-top: 20px;
		background: transparent;
		border-radius: 0;
	}
}

:global(.dark) .content {
	background: $dark-black;

	@include breakpoint-md {
		background: transparent;
	}
}

.modalContainer {
	max-width: 572px;
	padding: 0 16px;
	margin: 0 auto;
	touch-action: none;
	background: $white;

	@include breakpoint-md {
		height: 100%;
		padding: 0;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;

		> * {
			padding: 0 32px;
		}
	}
}

:global(.dark) .modalContainer {
	background: $dark-black;
}

.modalHeaderTop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 28px 0 16px;
}

.modalHeaderMobile {
	display: none;

	@include breakpoint-md {
		display: block;
	}
}

.modalHeader {
	padding-top: 48px;
	text-align: center;

	@include breakpoint-md {
		text-align: left;
	}
}

.logoMobile {
	width: 52px;
	height: 52px;
}

.logo {
	width: 96px;
	height: 96px;
	margin-bottom: 16px;

	@include breakpoint-md {
		display: none;
	}
}

.title {
	margin-bottom: 4px;
}

.subTitle {
	margin-bottom: 24px;
}

:global(.dark) .subTitle {
	@include breakpoint-md {
		color: $white-dark !important;
	}
}

.hr {
	padding: 0;
	margin: 0;
}

.people {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 8px auto 32px;
}

.person {
	display: flex;
	width: calc(50% - 15px);
	margin-top: 24px;

	@include breakpoint-xs {
		width: 100%;
	}
}

.personAvatar {
	width: 56px;
	margin-right: 16px;
}

:global(.dark) .personRole {
	@include breakpoint-md {
		color: $white-dark !important;
	}
}

.personTwitter {
	color: #55acee;
	text-decoration: none;

	&:hover {
		color: $link;
	}

	p {
		display: flex;
		align-items: center;
		color: #55acee;

		&:hover {
			color: darken(#55acee, 15);
		}
	}

	svg {
		margin-right: 2px;
	}

	// Both modifiers do the same job: drop the base class's Twitter blue for the
	// neutral ink. Kept as two names rather than one shared class so the markup
	// still says which kind of link it is.
	&.personGithub,
	&.personWebsite {
		color: $black;

		p {
			color: $black;

			&:hover {
				color: darken($black, 15);
			}
		}

		svg {
			margin-right: 4px;
		}
	}
}

/* stylelint-disable-next-line */
:global(.dark) .personTwitter p {
	color: #55acee;

	&:hover {
		color: $off-white-dark;
	}
}

:global(.dark) .personTwitter.personGithub p,
:global(.dark) .personTwitter.personWebsite p {
	color: $white;

	&:hover {
		color: $off-white-dark;
	}
}

:global(.dark) .personTwitter.personGithub p svg path {
	fill: $white;
}

// The GitHub mark is a filled path; the globe is stroked, so it needs the other
// property. Both are set explicitly rather than relying on currentColor, to
// match how the rule above already works.
:global(.dark) .personTwitter.personWebsite p svg {
	stroke: $white;
}

.modalFooter {
	padding-bottom: 48px;
	margin-top: 12px;
	text-align: center;

	@include breakpoint-md {
		text-align: left;
	}
}