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

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

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

	&:hover,
	&:focus {
		background-color: transparent;
		background: #f2f2f2;
		outline: 0;
		box-shadow: none;
	}

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

		&:hover {
			border: 1px solid #e0e0e0;
		}
	}
}
</style>
