@import "@Themes/constants.scss";

.root {
	display: inline-flex;
	justify-content: center;
	border: 1px solid;
	gap: 12px;
	box-sizing: border-box;
	height: fit-content;
	align-items: center;
	gap: 6px;
	background: transparent;
	font-style: normal;
	font-weight: 500;
	white-space: nowrap;
	user-select: none;
	cursor: pointer;
	font-family: var(--font-primary);

	svg {
		width: 18px;
		height: 18px;
	}

	&[variant="primary"] {
		color: $white;
		background-color: $purple-flash;
		border-color: $purple-flash;
		padding: 24px 48px;
		font-weight: 400;
		font-size: 18px;
		line-height: 22px;

		&:hover {
			border-color: $purple-hover;
			background-color: $purple-hover;
		}

		&:disabled {
			border-color: $purple-soft;
			background-color: $purple-soft;
			pointer-events: none;
		}
	}

	&[variant="secondary"] {
		color: $white;
		background-color: $red-flash;
		border-color: $red-flash;
		padding: 24px 48px;
		font-weight: 400;
		font-size: 18px;
		line-height: 22px;

		&:hover {
			border-color: $re-hover;
			background-color: $re-hover;
		}

		&:disabled {
			border-color: $red-soft;
			background-color: $red-soft;
			pointer-events: none;
		}
	}

	&[variant="ghost"] {
		color: $pink-flash;
		background-color: transparent;
		border-color: $pink-flash;
		padding: 24px 48px;
		font-weight: 400;
		font-size: 18px;
		line-height: 22px;

		svg {
			path {
				stroke: $white;
			}
		}

		&:hover {
			border-color: $pink-hover;
			color: $pink-hover;
		}

		&:disabled {
			border-color: $pink-soft;
			background-color: $pink-soft;
			pointer-events: none;
		}
	}

	&[fullwidthattr="true"] {
		width: 100%;
		flex: 1;
	}

	&[fullwidthattr="false"] {
		width: fit-content;
	}

	&[touppercase="false"] {
		text-transform: inherit;
	}

	&[variant="line"] {
		color: $pink-flash;
		background-color: transparent;
		border-color: transparent;
		padding: 0;
		font-weight: 400;
		font-size: 18px;
		line-height: 22px;
		text-decoration-line: underline;
	}
}