@import "../_custom-properties.css";

/*--------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/

/* Default Button */
.ui-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: var(--ui-btn-aligment, center);
	height: var(--element-height);
	margin-bottom: 0;
	padding: var(--ui-btn-padding, 0.5rem 2.5rem);
	outline: 0;
	border-width: var(--ui-btn-border-width, 1.5px);
	border-style: solid;
	border-radius: var(--rounded-radius);
	text-decoration: none;
	font-family: var(--global-font-family);
	font-weight: var(--ui-btn-font-weight, 400);
	line-height: var(--ui-btn-line-height, 1.5);
	font-size: var(--ui-btn-font-size, var(--fs-small));
	white-space: nowrap;
	vertical-align: middle;
	touch-action: manipulation;
	user-select: none;
	cursor: var(--ui-btn-cursor, pointer);

	&,
	&:visited {
		border-color: var(--color-gray-light);
		background: var(--color-gray-light);
		color: var(--color-gray-dark);
	}

	&:hover,
	&:focus,
	&:active,
	&.is_active {
		border-color: var(--color-gray-dark);
		background: var(--color-gray-dark);
		color: var(--color-light);
	}

	&:disabled,
	&.is_disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}

	& > i,
	& > svg {
		margin-left: var(--spacer-1);
		margin-right: var(--spacer-1);
	}
}

.block-buttons {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	& .ui-btn {
		width: 100%;
		display: flex;
		margin-bottom: var(--spacer);
	}

	& .ui-btn:last-child {
		margin-bottom: 0;
	}
}

@media (--sm) {

	.block-buttons {
		width: auto;
		display: inline-flex;
		flex-direction: row;

		& .ui-btn {
			display: inline-flex;
			margin-bottom: 0;
			margin-right: var(--spacer);
		}

		& .ui-btn:last-child {
			margin-right: 0;
		}
	}
}

/* button styles. */
.btn-primary,
.btn-primary:visited {
	border-color: var(--color-primary);
	background: var(--color-primary);
	color: var(--color-secondary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.is_active {
	border-color: var(--color-primary-light);
	background: var(--color-primary-light);
	color: var(--color-secondary);
}

.btn-secondary,
.btn-secondary:visited {
	border-color: var(--color-secondary);
	background: var(--color-secondary);
	color: var(--color-white);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.is_active {
	border-color: var(--color-secondary);
	background: var(--color-secondary-dark);
	color: var(--color-white);
}

.btn-white,
.btn-white:visited {
	border-color: var(--color-gray-light);
	background: var(--color-light);
	color: var(--color-black);
}

.btn-white:hover,
.btn-white:focus,
.btn-white:active,
.btn-white.is_active {
	border-color: var(--color-secondary-dark);
	background: var(--color-dark);
	color: var(--color-white);
}

.btn-black,
.btn-black:visited {
	border-color: var(--color-dark);
	background: var(--color-dark);
	color: var(--color-white);
}

.btn-black:hover,
.btn-black:focus,
.btn-black:active,
.btn-black.is_active {
	border-color: var(--color-gray-light);
	background: var(--color-light);
	color: var(--color-black);
}

.btn-gray,
.btn-gray:visited {
	border-color: var(--color-gray);
	background: var(--color-gray);
	color: var(--color-white);
}

.btn-gray:hover,
.btn-gray:focus,
.btn-gray:active,
.btn-gray.is_active {
	border-color: var(--color-gray-dark);
	background: var(--color-gray-dark);
	color: var(--color-white);
}

.btn-outline-primary,
.btn-outline-primary:visited {
	border-color: var(--color-primary);
	background: transparent;
	color: var(--color-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.is_active {
	border-color: var(--color-primary-light);
	background: var(--color-primary-light);
	color: var(--color-secondary);
}

.btn-outline-secondary,
.btn-outline-secondary:visited {
	border-color: var(--color-secondary);
	background: transparent;
	color: var(--color-secondary);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active,
.btn-outline-secondary.is_active {
	border-color: var(--color-secondary-dark);
	background: var(--color-secondary-dark);
	color: var(--color-white);
}

.btn-outline-white,
.btn-outline-white:visited {
	border-color: var(--color-light);
	background: transparent;
	color: var(--color-light);
}

.btn-outline-white:hover,
.btn-outline-white:focus,
.btn-outline-white:active,
.btn-outline-white.is_active {
	border-color: var(--color-light);
	background: var(--color-light);
	color: var(--color-black);
}

/* Helper Buttons. */
@each $helper in news, success, info, warning, error {
.btn-$(helper),
.btn-$(helper):visited {
	border-color: var(--color-$(helper));
	background: var(--color-$(helper));
	color: var(--color-white);
}

.btn-$(helper):hover,
.btn-$(helper):focus,
.btn-$(helper):active,
.btn-$(helper).is_active {
	border-color: var(--color-$(helper)-dark);
	background: var(--color-$(helper)-dark);
	color: var(--color-white);
}
}

/* Button sizes. */
.btn-sm {
	padding: 0.5rem 1rem;
	font-size: 13px;
	height: auto;
}

.btn-md {
	padding: 10px 20px;
	font-size: 15px;
	height: auto;

	@media (--sm) {
		padding: 10px 40px;
		height: 60px;
	}
}

.btn-lg {
	padding: 15px 25px;
	font-size: 16px;
	height: auto;

	@media (--sm) {
		padding: 10px 60px;
		height: 70px;
	}
}

.btn-short {
	padding-left: 1rem;
	padding-right: 1rem;
}

.btn-long {
	padding-left: 4rem;
	padding-right: 4rem;
}

/* Button pill. */
.btn-pill {
	border-radius: var(--pill-radius);
}

/* Button full width. */
.btn-block {
	width: 100%;
}

@each $size in sm, md, lg {
@media (--$(size)) {
	.btn-block-$(size) {
		width: 100%;
	}
}

@media (--$(size)-max) {
	.btn-block-$(size)-max {
		width: 100%;
	}
}
}

/* Button icons. */
.btn-icon {
	cursor: pointer;

	& svg:focus,
	& svg:hover,
	& i:focus,
	& i:hover {
		opacity: 0.6;
	}
}

/* Button close. */
.btn-close {
	position: absolute;
	top: 0;
	right: 0;
	padding: 0.5rem 1rem;
	z-index: 10;
}

.btn-close,
.btn-close:visited {
	border-color: transparent;
	background: transparent;
	color: var(--color-white);
}

.btn-close:hover,
.btn-close:focus,
.btn-close:active,
.btn-close.is_active {
	border-color: transparent;
	background: transparent;
	color: var(--color-light);
	opacity: 0.75;
}