@import 'layout';

.affilizz-button {
	text-decoration: none;
	cursor: pointer;

	&--inline {
		* {
			display: inline-block;
		}

		svg {
			margin-left: 5px;
		}

		> svg {
			max-width: 16px;
			max-height: 16px;
		}
	}

	&-icons {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-right: $gutter_narrow;

		.dashicons, .dashicons-before {
			display: flex;
			align-items: center;
			justify-content: center;
			line-height: 1;

			&:before {
				font-size: 16px;
				top: 2px;
				position: relative;
				opacity: 0.7;
			}
		}
	}

	&--primary {
		background: $black_main;
		padding: 10px 12px;

		font-weight: 400;
		font-size: $font_size_medium;

		color: $white_main;
		border-radius: $border_radius;
		border: none;

		&:hover, &:active {
			color: $white_main;
			cursor: pointer;
			background-color: $green_medium;
			color: $black_main;
		}

		&:disabled {
			background: $grey_super_light;
			color: $white_main;
		}
	}

	&[disabled] {
		pointer-events: none;
		opacity: 0.25;
	}

	&--secondary {
		background: $white_main;

		box-shadow: 0 0 0 1px $black_main inset;
		padding: 10px 20px;
		border: none;

		font-weight: 400;
		font-size: $font_size_medium;

		color: $black_main;
		border-radius: $border_radius;

		&:hover, &:active {
			cursor: pointer;
			background-color: $black_main;
			color: $white_main;

			img {
				filter:  brightness(0) invert(1);
			}
		}
	}

	&--primary-hover {
		&:hover, &:active {
			color: $white_main;
			cursor: pointer;
			background-color: $green_medium;
			color: $black_main;
			box-shadow: none;
		}
	}

	&--create {
		display: inline-flex;
		background: #ff5722;
		border-radius: 4px;

		margin-right: 5px;
		margin-bottom: 4px;

		a {
			color: $white_main;
			font-size: $font_size_smaller;
		}

		a.alt {
			color: $white_main;
			font-size: $font_size_smaller;
			padding: 0 5px;
		}
	}

	&--call {
		display: inline-block;
		background: $green_main;
		border-radius: 4px;
		margin-bottom: 4px;
		a {
			color: $white_main;
			font-size: $font_size_smaller;
		}
	}

	&--hollow {
		border-radius: $border_radius;
		border: 1px solid $white_main;
		padding: 5px;

		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 3px 5px;
		gap: $gutter_narrow;

		color: $white_main;

		&:hover, &:active, &:focus {
			color: $white_main;
		}
	}
}

.insert-affilizz-publication, #insert-affilizz-publication,
.create-affilizz-publication, #create-affilizz-publication {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 5px 7px 6px;

	font-weight: 600;
	color: $white_main;
	font-size: $font_size_smaller;

	* {
		pointer-events: none;
	}
}

#affilizz-floating-button {
	width: 25px;
	height: 40px;
	background: #1dd6a1;
	position: absolute;
	top: 0;
	z-index: 6000;
	opacity: 0;
	padding: 0 5px 4px 5px;
	border-radius: 4px;
	text-decoration: none;

	&:after {
		opacity: 1;
		height: 8px; width: 8px;
		transform: rotate(45deg);
		content: '';
		position: absolute;
		background: #1dd6a1;
		right: -4px;
		top: 16px;
	}

	&:focus, &:active {
		outline: none;
		box-shadow: none;
	}

	img {
		margin-top: 4px;
	}

	* {
		pointer-events: none;
	}
}

#step-success-button {
	color: $white_main;
}