/*
	GoToSocial
	Copyright (C) 2021-2023 GoToSocial Authors admin@gotosocial.org

	This program is free software: you can redistribute it and/or modify
	it under the terms of the GNU Affero General Public License as published by
	the Free Software Foundation, either version 3 of the License, or
	(at your option) any later version.

	This program is distributed in the hope that it will be useful,
	but WITHOUT ANY WARRANTY; without even the implied warranty of
	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
	GNU Affero General Public License for more details.

	You should have received a copy of the GNU Affero General Public License
	along with this program. If not, see <http://www.gnu.org/licenses/>.
*/

.profile {
	display: flex;
	gap: 1rem;
}
.profile .header {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	justify-content: flex-start;
	width: 20rem;
	word-break: break-all;
}

.profile .header > * {
	border-radius: var(--br);
}

.profile figure {
	margin: 0 0 0.5rem 0;
	border-radius: var(--br);
	overflow: hidden;
	display: flex;
	justify-content: space-between;
	position: relative;
}
.profile figure img.bg {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	object-fit: cover;
}

.profile figure img.avatar {
	margin: 0.5rem;
	width: 5rem;
	height: 5rem;
	z-index: 2;
	object-fit: fill;
	border-radius: var(--br);
}

.profile .header .user {
	background: var(--profile-bg);
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 1rem;
}

.profile .header .displayname {
	line-height: 1.25rem;
	font-size: 1rem;
	font-weight: 600;
}

.profile .header .username {
	min-width: 0;
	font-size: 1rem;
	color: var(--fg-accent);
	-webkit-user-select: all;
	user-select: all;
}

.profile .header .role {
	background: var(--bg);
	color: var(--fg);

	border: 0.075rem solid var(--bg);
	border-radius: 0.25rem;
	margin: 0.5rem;
	padding: 0.25rem;
	z-index: 2;
	line-height: 0.75em;
	font-size: 0.75rem;
	font-variant: small-caps;
  align-self: flex-start;
}

.profile .header .role.admin {
	color: var(--role-admin);
	border-color: var(--role-admin);
}

.profile .header .role.moderator {
	color: var(--role-mod);
	border-color: var(--role-mod);
}

.profile .toots {
	flex: 65 25rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.profile .toots .col-header {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1rem;
}

.profile .toots .col-header a {
	justify-self: end;
}

.profile .toots .toot {
	border-radius: var(--br);
}
.toot .info {
	flex-direction: row;
	gap: 1rem;
}
.toot .info {
	flex-direction: row;
	gap: 1rem;
}

.profile .toots .backnextlinks {
	display: flex;
	justify-content: space-between;
}

.profile .toots .backnextlinks .next {
	margin-left: auto;
}

.profile .col-header {
	margin-bottom: -0.25rem;
}


.profile > * {
	border-radius: var(--br);
}

.profile .fields {
	background: var(--profile-bg);
	display: grid;
	grid-template-columns: 1fr 2fr;
	padding: 0.5rem;
}

.profile .fields > * {
	padding: 0.5rem;
}
.profile .fields > b {
	align-self: center;
	justify-self: flex-end;
	font-weight: 600;
}
.profile .fields > span + b,
.profile .fields > time + b {
	border-top: 0.1rem solid var(--gray2);
	align-self: flex-start;
	text-align: right;
}

.profile .rss-icon,
.profile .rss-icon img {
	width: 20px;
	height: 20px;
}

.profile .fields .flex,
.profile .fields .flex * {
	display: flex;
	line-height: 1rem;
	gap: 0.5rem;
	align-items: center;
}

.profile .bio {
	background: var(--profile-bg);
	padding: 1rem;
}