@import '~shared/styles/colors';

.loading {
	background: @gray-light;
	border-radius: 2px;
	font-family: 'Roboto Mono', monospace;
	font-size: 12px;
	padding: 20px;
}

.error {
	background: @gray-light;
	border-radius: 2px;
	color: @red;
	font-size: 14px;
	margin-bottom: 10px;
	padding: 20px;
}

.actions {
	bottom: 30px;
	display: flex;
	flex-direction: row;
	position: fixed;
	right: 30px;

	button {
		align-items: center;
		background: @white;
		border: 1px solid @gray;
		color: @gray-dark;
		cursor: pointer;
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-left: -1px;
		min-height: 32px;
		min-width: 32px;
		outline: none;
		padding: 2px;

		&.bottom svg {
			transform: rotate(180deg);
		}

		&.follow svg,
		&.unfollow svg {
			height: 18px;
			width: 18px;
		}
	}

	svg {
		fill: @gray-dark;
	}
}

.logactions {
	bottom: 30px;
	display: flex;
	position: fixed;
	right: 30px;

	div {
		display: flex;
	}

	button {
		align-items: center;
		background: @white;
		border: 1px solid @gray-light;
		color: @gray-dark;
		cursor: pointer;
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-left: -1px;
		min-height: 32px;
		min-width: 32px;
		outline: none;
		padding: 2px;

		svg {
			fill: @gray-dark;
		}

		&.gotoTop {
			transform: rotate(180deg);
		}

		&.followButton {
			svg {
				height: 18px;
				width: 18px;
			}
		}

		&.unfollowButton {
			svg {
				height: 18px;
				width: 18px;
			}
		}
	}
}
