/**
 * #Button
 */

.c-btn {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	column-gap: 16px;
	align-items: center;
	min-width: 200px;
	max-width: 320px;
	padding: 20px 20px 20px 17px;
	overflow: hidden;
	border: 1px solid var(--white);
	color: var(--white);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	text-align: center;
	transition: opacity 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;

	&::before {
		content: "";
		width: 25px;
		height: 25px;
	}

	.c-arrow {
		justify-self: end;
	}

	&:hover {
		opacity: 0.75;
		color: inherit;
	}

	&.c-btn--ghost-dark {
		border-color: #111;
		background-color: var(--white);
		color: #111;
	}

	&.c-btn--fill-red {
		border-color: #ff383c;
		background-color: #ff383c;
		color: var(--white);
		max-width: none;

		&:hover {
			opacity: 1;
			border-color: #ff6b6e;
			background-color: #ff6b6e;
			color: var(--white);
		}
	}
}

.p-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 180px;
	height: 48px;
	padding: 0 24px;
	border-radius: 999px;
	background-color: var(--color-accent);
	color: var(--black);
	font-weight: var(--fw-bold);
	letter-spacing: 0.08em;
	text-decoration: none;

	&:hover {
		opacity: 0.8;
		color: var(--black);
	}
}