src/static/style/_custom.scss
// non component related but photon reddit related style
@use 'vars';
@use 'shadow';

body {
	background-color: vars.$background;
}

#mainWrapper {
	position: relative;
	margin: auto;
}

#initialLoadingIcon {
	width: 100%;
	display: flex;
	justify-content: center;
	padding-top: vars.$header-height;
}

.dropdown {
	display: none;
}

.button {
	border: 1px solid vars.$border-heavy-color;
	background: vars.$background;
	height: 2rem;
	border-radius: 1rem;
	padding: 0 .75rem;
	transition: all .25s ease;

	&.light {
		background: vars.$background-el1;
	}

	&:hover {
		color: vars.$primary;
	}

	&:active {
		border-color: vars.$primary;
	}

	&:disabled {
		color: grey;
		cursor: default;
	}
}

a {
	transition: filter .25s ease;
	filter: brightness(1);

	&:hover {
		filter: brightness(1.25);
	}

	&.subreddit *, &.user * {
		color: vars.$primary;
	}
}

.transparentButton {
	background-color: unset;
	border-radius: 50%;
	transition: background-color .25s ease;

	&:where(:hover, :focus-visible) {
		background-color: vars.$transparent-btn-hover;
	}

	&:active {
		background-color: vars.$transparent-btn-active;
	}
}

.transparentButtonAlt {
	position: relative;
	--dim: 100%;

	&::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		margin-left: 50%;
		margin-top: 50%;
		transform: translateX(-50%) translateY(-50%);
		width: var(--dim);
		height: var(--dim);
		background-color: unset;
		border-radius: 50%;
		transition: background-color .25s ease;
	}

	&:where(:hover, :focus-visible) {
		&::before {
			background-color: vars.$transparent-btn-hover;
		}
	}

	&:active {
		&::before {
			background-color: vars.$transparent-btn-active;
		}
	}
}

.emojiFlag {
	height: 1em;
	width: auto;
	margin: 0 .075em;
}

input.checkbox {
	display: none;

	&:checked + label {
		background: vars.$primary;

		&::before {
			opacity: 1;
		}
	}

	&:disabled + label {
		opacity: .5;

		&::before {
		}
	}

	+ label {
		display: inline-block;
		width: var(--size);
		min-width: var(--size);
		height: var(--size);
		box-sizing: border-box;
		background: vars.$input-element-bg;
		position: relative;
		cursor: pointer;
		transition: background-color .25s ease;
		--size: 1em;
		border-radius: 0.25rem;

		&::before {
			content: "";
			position: absolute;
			width: 60%;
			height: 27%;
			border-bottom: 4px solid vars.$text-on-primary;
			border-left: 4px solid vars.$text-on-primary;
			transform: translateY(-76%) translateX(-52%) rotate(-45deg);
			margin-top: 50%;
			margin-left: 50%;
			opacity: 0;
			transition: opacity .25s ease;
		}

	}

}

label:is(:hover, :focus) + input.checkbox + label, input.checkbox + label:is(:hover, :focus) {
	&::before {
		opacity: .333;
	}
}

input.radio {
	display: none;

	&:checked + label {
		background: vars.$primary;

		&:hover {
			background: vars.$primary;
		}
	}

	&:disabled + label {
		opacity: .5;
	}

	+ label {
		display: inline-block;
		width: 1em;
		min-width: 1em;
		height: 1em;
		box-sizing: border-box;
		background: vars.$input-element-bg;
		border-radius: 50%;
		position: relative;
		cursor: pointer;
		transition: background-color .25s ease;

		&:hover, &:focus {
			background: vars.$primary-faint;
		}
	}
}

.dropDownButton, .dropDownEntry {
	.loadingIcon {
		height: 2em;
	}
}

.loginButton {
	background: vars.$primary-contrast;
	color: vars.$text-on-primary;
	height: 2.5rem;
	padding: 0 .75rem;
	border-radius: 1.25rem;
	position: relative;
	transition: background-color .25s ease;

	&:hover {
		background: vars.$primary;
	}
}

.redditSticker, [data-media-id^="emote|"] {
	vertical-align: middle;
	margin: 0 2px;
}

.retryButton {
	padding: .25rem .75rem;
	background: vars.$primary-contrast;
	color: vars.$text-on-primary;
	margin: 2rem 0;
	width: max-content;
	height: 2.5rem;
	align-self: center;
	font-size: 1.25rem;
	border-radius: 1.5rem;
}
