@layer components.button {
	[data-c-button] {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		text-decoration: none;
		font-family: var(--font-family-sans-serif);
		transition: color 0.3s, background-color 0.3s, border-color 0.3s;
		cursor: pointer;

		&.variant-primary {
			padding: 13px 33px;
			gap: 10px;
			border: 3px solid var(--color-red);
			font-weight: var(--font-weight-extra-bold);
			font-size: var(--font-size-2xl);
			line-height: 130%;
			color: var(--color-red);

			&:hover {
				background-color: var(--color-red);
				color: var(--color-white);
				outline: none;
			}

			@media screen and (max-width: 767px) {
				font-size: var(--font-size-sm);
				padding: 9px 13px;
				border: 2px solid var(--color-red);
			}
		}

		&.variant-small {
			font-size: var(--font-size-base);
			line-height: 110%;
			padding: 13px 28px;
			color: var(--color-red);
			gap: 10px;
			border: 3px solid var(--color-red);
			font-weight: var(--font-weight-extra-bold);

			&:hover {
				background-color: var(--color-red);
				color: var(--color-white);
				outline: none;
			}

			@media screen and (max-width: 767px) {
				font-size: var(--font-size-sm);
				padding: 9px 13px;
				border: 2px solid var(--color-red);
			}
		}

		&.variant-text {
			background-color: transparent;
			color: inherit;
			border: none;
			font-weight: inherit;
			gap: 10px;

			&:hover {
				color: var(--color-red);
				outline: none;
			}
		}

		&.prefix-arrow,
		&.suffix-arrow {
			.arrow {
				transition: width 0.3s ease;

				.line {
					d: path("M0 8h25");
					transition: d 0.3s ease;
				}

				.chevron {
					d: path("m18 15 7-7-7-7");
					transition: d 0.3s ease;
				}
			}

			&:hover {
				.arrow {
					.line {
						d: path("M0 8h30");
					}

					.chevron {
						d: path("m23 15 7-7-7-7");
					}
				}
			}
		}

		&[data-active="true"] {
			background-color: var(--color-red);
			color: var(--color-white);
			border-color: var(--color-red);
		}
	}
}