@import "../mixins.scss";

.jet-ui_button {
	cursor: pointer;
	position: relative;
	display: inline-block;
	margin: 0;
	padding: $button-padding;
	font-size: $button-font-size;
	line-height: $button-line-height;
	font-weight: 500;
	color: $button-color-text;
	text-decoration: none;
	border: none;
	border-radius: $radius;
	box-sizing: border-box;
	background-color: $button-color-bg;
	box-shadow: 0px 4px 4px rgba(35, 40, 45, 0.24);
	transition: $transition;
	outline: none;

	&:hover {
		color: $button-color-text-hover;
		background-color: $button-color-bg-hover;
		box-shadow: none;
	}

	&--disabled,
	&--disabled:hover {
		cursor: not-allowed;
		background-color: $button-color-bg-disable;
		box-shadow: none;
	}

	// Sizes
	&--small {
		padding: $button-padding-small;
		font-size: $button-font-size-small;
		line-height: $button-line-height-small;
	}

	&--large {
		padding: $button-padding-large;
		font-size: $button-font-size-large;
		line-height: $button-line-height-large;
	}

	// Types
	&--secondary {
		color: $color-accent;
		border: $border-width solid $color-accent;
		background: none;
		box-shadow: none;

		&:hover {
			color: $color-accent;
			background-color: lighten($color-accent, 60%);
		}
	}

	&--transparent {
		padding: 0;
		color: $color-accent;
		border: none;
		background: none;
		box-shadow: none;

		&:hover {
			color: $button-color-bg-hover;
			background: none;
		}
	}
}
