button,
#c_submitButton {
	position: relative;
	display: inline-block;
	cursor: pointer;
	outline: none;
	border: none;
	vertical-align: middle;
	text-decoration: none;
	font-size: inherit;
	font-family: inherit;
	font-weight: bold;
	letter-spacing: .05rem;
	color: rgb(var(--bg));
	text-transform: uppercase;
	padding: .25rem .5rem;
	background: rgb(var(--primary));
	border-radius: 0.5em;
	transition: transform .2s cubic-bezier(0, 0, 0.58, 1), background .2s cubic-bezier(0, 0, 0.58, 1);

	&:hover,
	&:focus {
		transform: translate(0, 0.25em);
		border: none;
	}

	&:active {
		transform: translate(0, 0.75em);
		border: none;
	}
}

#c_widget {
	box-sizing: border-box;
	height: 100%;
	padding: 1em 0;
	background-attachment: fixed;
	color: rgb(var(--text));
}

#c_widget button:disabled,
#c_widget input[type=submit]:disabled {
	opacity: 60%;
}

#c_widget button:disabled:hover,
#c_widget input[type=submit]:disabled:hover {
	color: rgb(var(--bg));
}

/* Input section */

#c_widgetTitle {
	margin-bottom: 1rem;
}

.c-inputWrapper {
	display: block;
	text-align: left;
}

#c_nameWrapper {
	width: 49%;
	float: left;
}

#c_websiteWrapper {
	width: 49%;
	float: right;
}

.c-input {
	box-sizing: border-box;
	padding: .2rem;
	margin-bottom: .5rem;
	color: rgb(var(--text));
	border: var(--border);
	outline: none;
	font-size: inherit;
	background-color: rgb(var(--bg));
	font-family: var(--font);
	text-align: left;
	width: 100%;
	border-radius: .5rem;
	transition: .2s cubic-bezier(0, 0, 0.58, 1);
	margin-inline: auto;
}

.c-input:focus {
	box-shadow: 0.5em 0.5em 0 0 rgb(var(--primary));
}

.c-textInput {
	resize: none;
}

#c_submitButton {
	display: block;
	margin-left: auto;
	margin: .5em 0 3em auto;
}

#c_replyingText {
	color: rgb(var(--text));
	float: right;
}

.c-label {
	text-transform: uppercase;
	font-weight: 700;
	display: block;
}

/* Comment section */
.c-comment {
	--color: var(--secondary);

	margin-bottom: 15px;
	padding: 10px;
	text-align: left;
	border-radius: .5em;

	.c-replyButton {
		background-color: rgb(var(--color));
	}
}

.c-reply {
	display: block;
	width: 90%;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: 0;
	padding: 10px;
}

.c-reply:last-child {
	margin-bottom: 0;
}

.c-replyContainer {
	margin: -10px;
	margin-top: 10px;
	padding: 10px;
}

.c-name {
	display: inline-block;
	margin: 0;
	margin-right: .75rem;
}

.c-site {
	text-transform: lowercase;
	text-decoration: none;
}

.c-timestamp {
	float: right;
	opacity: 75%;
}

.c-text {
	padding: .5rem;
	color: rgb(var(--text));
	border: var(--border);
	/* background-color: rgba(var(--color), 0.15); */
	border-radius: .5rem;
}

/* Pagination */
#c_pagination {
	text-align: center;
}

.c-replyButton,
.c-expandButton,
.c-paginationButton {
	margin-top: 1rem;
	margin-right: .25rem;
}