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

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

<style lang="scss" scoped>
.serenity__button-secondary {
	background: #5c6278;
	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: #5c6278;
		background-color: #ffffff;
		border: 1px solid #5c6278; */
	}

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

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

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

	&.outline {
		color: #5c6278;
		background-color: #ffffff;
		border: 1px solid #5c6278;

		&.border-light {
			border: 1px solid #f3ecec;

			&:hover {
				color: #5c6278;
				background-color: #f3ecec;
			}

			&:focus {
				outline: 0;
				box-shadow: none;
				background: #f3ecec;
				color: #5c6278;
			}
		}

		&:hover {
			color: #fff;
			background-color: #5c6278;
		}

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