:root {
	--cp-button--color: var(--cp-color-ui-inverted-light);
	--cp-button--color--hover: var(--cp-button--color);
	--cp-button--bg: var(--cp-color-ui-primary);
	--cp-button--bg--hover: #19221E;
	--cp-button--border-color: var(--cp-button--bg);
	--cp-button--border-color--hover: var(--cp-button--bg--hover);
	--cp-button--border-radius: var(--cp-border-radius-sm);
	--cp-button--padding: var(--cp-ui--gap-y-x);
	--cp-button--text-align: center;
	--cp-button--line-height: 1.5;
}

%cp-button {
	border: 1px solid;
	border-color: var(--cp-button--border-color);
	border-radius: var(--cp-button--border-radius);
	background: var(--cp-button--bg);
	padding: var(--cp-button--padding);
	color: var(--cp-button--color);
	line-height: var(--cp-button--line-height);
	letter-spacing: .04em;
	font-weight: var(--cp-font-weight--bold);
	text-align: var(--cp-button--text-align);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;

	&:hover,
	&:focus {
		color: var(--cp-button--color--hover);
		border-color: var(--cp-button--border-color--hover);
		background: var(--cp-button--bg--hover);

		svg, i,
		.fl-button-text,
		span {
			color: var(--cp-button--color--hover);
		}
	}

	&:active,
	&:focus {
		color: var(--cp-button--color--hover);
		border-color: var(--cp-button--border-color--hover);
		outline:none;

		.fl-button-text {
			color: var(--cp-button--color--hover);
		}
	}
}

%cp-button--outline {
	--cp-button--color: var(--cp-color-ui-secondary);
	--cp-button--color--hover: var(--cp-color-ui-inverted-light);
	--cp-button--bg: transparent;
	--cp-button--bg--hover: var(--cp-color-ui-secondary);
	--cp-button--border-color: var(--cp-button--color);
}

%cp-button--is-small {
	--cp-button--padding: var(--cp-ui--gap-y-x--sm);
	font-size: var(--cp-font-size--sm);
}

.cp-button {
	@extend %cp-button;

	svg, i,
	.fl-button-text,
	span {
		color: var(--cp-button--color);
	}

	svg {
		width: 1.25em;
		height: 1.25em;
		font-size: 1.25em;

		&.is-small {
			width: 1em;
			height: 1em;
		}
	}

	i {
		font-size: 1.25em;

		&.is-small {
			font-size: 1em;
		}
	}

	svg, i {
		&:last-child:not(:first-child) {
			margin: -.5em 0 -.5em .5em;
			float: right;
		}

		&:first-child:not(:last-child) {
			margin: -.5em .5em -.5em 0;
			float: left;
		}
	}

	// sizes
	&.is-xsmall {
		--cp-button--padding: var(--cp-ui--gap-y-x--sm);
		font-size: var(--cp-font-size--xs);
	}

	&.is-small {
		@extend %cp-button--is-small;
	}

	&.is-large {
		--cp-button--padding: var(--cp-ui--gap-y-x--lg);
	}

	&.is-fullwidth {
		width: 100%;
	}

	// styles
	&.is-light {
		--cp-button--bg: var(--cp-color-ui-inverted-light );
		--cp-button--bg--hover: var(--cp-color-ui-inverted );
		--cp-button--color: var(--cp-color-text-primary);
		--cp-button--color--hover: var(--cp-button--color);
		--cp-button--border-color: var(--cp-button--bg);
	}

	&--outlined,
	&.is-transparent {
		@extend %cp-button--outline;
	}

	&--transparent,
	&.is-text {
		--cp-button--color: var(--cp-color-text-link);
		--cp-button--bg: transparent;
		--cp-button--bg--hover: transparent;
		--cp-button--border-color: transparent;
		--cp-button--border-radius: var(--cp-border-radius-sm);
		--cp-button--padding: 0;
	}

}