////
/// Button elements.
///
/// @group  Elements
/// @author Lee Anthony <seothemeswp@gmail.com>
/// @link   https://CustomizePro.com/
////

@mixin button {
	display: inline-block;
	width: auto;
	font-weight: $font-weight--semibold;
	white-space: normal;
	text-decoration: none;
	cursor: pointer;

	@include hover-focus {
		outline: none;
		text-decoration: none;
	}

	&:disabled {

		&,
		&:hover,
		&:focus {
			opacity: 0.5;
			background-color: map_get($colors, grey);
			cursor: not-allowed;
		}
	}
}

#{$all-buttons} {

	@include button;
}

button,
.button {

	&.small {
		font-size: small;
	}

	&.big {
		font-size: large;
	}

	&.white {
		background: $color--white;

		@include hover-focus {
			background: $color--white;
		}
	}

	&.outline {
		background: transparent;

		@include hover-focus {
			background: transparent;
		}
	}

	&.ghost {
		color: $color--white;
		background: rgba($color--white, 0.2);

		@include hover-focus {
			background: rgba($color--white, 0.4);
		}
	}
}