<template>
	<button :disabled="disabled" :class="`btn serenity__button-primary ${outline ? 'outline' : ''}`" 
		:style="`margin-left: ${ml}; margin-right: ${mr};`">
		<slot></slot>
	</button>
</template>

<script>
export default {
	props: {
		outline: Boolean,
		disabled: Boolean,
		ml: String,
		mr: String,
	},
};
</script>

<style lang="scss" scoped>
.serenity__button-primary {
	background: #28aead;
	border-radius: 50px;
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 140%;
	text-align: center;
	color: #ffffff;
	padding: 10px 30px;

	&:hover {
		/* color: #28aead;
		background-color: #ffffff;
		border: 1px solid #28aead; */
	}

	&:focus {
		outline: 0;
		box-shadow: none;
		background: #28aead;
		color: #ffffff;
	}

	&:disabled {
		background: #e0e0e0;
		color: #ffffff;
		cursor: not-allowed;

		&:hover {
			border: 1px solid #e0e0e0;
		}
	}

	&.outline {
		color: #28aead;
		background-color: #ffffff;
		border: 1px solid #28aead;

		&:hover {
			color: #fff;
			background-color: #28aead;
		}

		&:focus {
			outline: 0;
			box-shadow: none;
			background: #28aead;
			color: #ffffff;
		}
	}
}
</style>
