.alm-btn-wrap {
	display: block;
	text-align: center;
	padding: 10px 0 0;
	margin: 0 0 25px;
	position: relative;

	.alm-load-more-btn {
		font-size: 14px;
		font-weight: 500;
		width: auto;
		height: 44px;
		line-height: 1;
		border: none;
		background: map-get($colors, 'default');
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
		color: #fff;
		border-radius: $radius;
		margin: 0;
		padding: 0 $padding;
		display: inline-block;
		position: relative;
		transition: all 0.1s ease;
		text-align: center;
		text-decoration: none;
		appearance: none;
		user-select: none;
		cursor: pointer;
		&:hover,
		&:focus {
			color: #fff;
			text-decoration: none;
			background: map-get($colors, 'default_hover');
		}
		&:active {
			background: map-get($colors, 'default');
			box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(0, 0, 0, 0.05);
			text-decoration: none;
			transition: none;
		}

		/* Loading Icon */
		&::before {
			position: absolute;
			left: 0;
			top: 0;
			background-color: transparent;
			background-image: url(get-loader());
			background-repeat: no-repeat;
			background-position: center center;
			background-size: 24px 24px;
			width: 100%;
			height: 100%;
			transition: all 0.1s ease;
			border-radius: 0;
			opacity: 0;
			visibility: hidden;
			display: block;
			content: '';
			z-index: 1;
			overflow: hidden;
		}

		/* Loading State */
		&.loading {
			cursor: wait;
			outline: none !important;
			color: transparent !important;
			border-color: transparent !important;
			background-color: transparent !important;
			box-shadow: none !important;
			text-decoration: none;
			&::before {
				opacity: 1;
				visibility: visible;
			}
		}

		/* Loaded / Done */
		&.done,
		&:disabled {
			pointer-events: none;
			opacity: 0.15;
			background-color: map-get($colors, 'default');
			outline: none !important;
			box-shadow: none !important;
		}

		/* Loading Icon */
		&::before,
		&.done::before,
		&:disabled::before {
			opacity: 0;
			visibility: hidden;
		}

		&.done {
			cursor: default;
		}

		&::after {
			display: none !important;
		}
	}

	.alm-elementor-link {
		display: block;
		font-size: 13px;
		margin: 0 0 15px;
		@media screen and (min-width: $md) {
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			margin: 0;
		}
	}
}

/* Blue */
.ajax-load-more-wrap.blue .alm-load-more-btn {
	background-color: map-get($colors, 'blue');
	&:hover,
	&:focus,
	&.loading {
		color: #fff;
		text-decoration: none;
		background: map-get($colors, 'blue_hover');
	}
	&:active {
		background-color: map-get($colors, 'blue');
	}
}

/* Green */
.ajax-load-more-wrap.green .alm-load-more-btn {
	background-color: map-get($colors, 'green');
	&:hover,
	&:focus,
	&.loading {
		color: #fff;
		text-decoration: none;
		background: map-get($colors, 'green_hover');
	}
	&:active {
		background-color: map-get($colors, 'green');
	}
}

/* Purple */
.ajax-load-more-wrap.purple .alm-load-more-btn {
	background-color: map-get($colors, 'purple');
	&:hover,
	&:focus,
	&.loading {
		color: #fff;
		text-decoration: none;
		background: map-get($colors, 'purple_hover');
	}
	&:active {
		background-color: map-get($colors, 'purple');
	}
}

/* Grey */
.ajax-load-more-wrap.grey .alm-load-more-btn {
	background-color: map-get($colors, 'grey');
	&:hover,
	&:focus,
	&.loading {
		color: #fff;
		text-decoration: none;
		background: map-get($colors, 'grey_hover');
	}
	&:active {
		background-color: map-get($colors, 'grey');
	}
}

/* Dark */
.ajax-load-more-wrap.dark .alm-load-more-btn {
	background-color: map-get($colors, 'dark');
	&:hover,
	&:focus,
	&.loading {
		color: #fff;
		text-decoration: none;
		background: map-get($colors, 'dark_hover');
	}
	&:active {
		background-color: map-get($colors, 'dark');
	}
}

/* Light Styles */
.ajax-load-more-wrap.is-outline .alm-load-more-btn,
.ajax-load-more-wrap.white .alm-load-more-btn,
.ajax-load-more-wrap.light-grey .alm-load-more-btn,
.ajax-load-more-wrap.white-inverse .alm-load-more-btn {
	&.loading {
		color: transparent !important;
		background-color: transparent !important;
		border-color: transparent !important;
		box-shadow: none !important;
	}
}

/* Default Outline */
.ajax-load-more-wrap.is-outline .alm-load-more-btn {
	color: map-get($colors, 'default');
	border: 1px solid rgba(map-get($colors, 'default'), 0.75);
	background-color: #fff;
	&:focus,
	&:hover,
	&.done {
		background-color: rgba(map-get($colors, 'default'), 0.05);
		color: map-get($colors, 'default_hover');
		border-color: map-get($colors, 'default_hover');
	}
	&:active {
		background-color: rgba(map-get($colors, 'default'), 0.025);
		border-color: map-get($colors, 'default');
	}
}

/* White Outline */
.ajax-load-more-wrap.white .alm-load-more-btn {
	background-color: #fff;
	color: map-get($colors, 'link');
	border: 1px solid map-get($borders, 'default');
	&:focus,
	&:hover,
	&.done {
		background-color: #fff;
		color: map-get($colors, 'link_hover');
		border-color: map-get($borders, 'default_active');
	}
	&:active {
		background-color: map-get($colors, 'grey_lighter');
		border-color: rgba(map-get($borders, 'default_active'), 0.65);
	}
}

/* Grey Light Outline */
.ajax-load-more-wrap.light-grey .alm-load-more-btn {
	background-color: map-get($colors, 'grey_light');
	color: map-get($colors, 'dark');
	border: 1px solid rgba(map-get($colors, 'grey'), 0.25);
	&:focus,
	&:hover,
	&.done {
		background-color: map-get($colors, 'grey_lighter');
		color: map-get($colors, 'dark_hover');
		border-color: rgba(map-get($colors, 'grey'), 0.5);
	}
	&:active {
		background-color: map-get($colors, 'grey_lightr');
		border-color: rgba(map-get($colors, 'grey'), 0.25);
	}
}

/* White Inverse */
.ajax-load-more-wrap.white-inverse .alm-load-more-btn {
	background-color: rgba(#fff, 0.3);
	color: #fff;
	border: none;
	box-shadow: none;
	&::before {
		background-image: url(get-loader(map-get($colors, 'grey_light')));
	}
	&:focus,
	&:hover,
	&.done {
		background-color: rgba(#fff, 0.925);
		color: map-get($colors, 'dark');
	}
	&:active {
		background-color: rgba(#fff, 0.85);
		box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
	}
}

/* Infinite */
.ajax-load-more-wrap.infinite {
	> .alm-btn-wrap {
		.alm-load-more-btn {
			width: 100%;
			background: none !important;
			border: none !important;
			box-shadow: none !important;
			opacity: 0;
			overflow: hidden;
			text-indent: -9999px;
			cursor: default !important;
			outline: none !important;
			padding: 0;

			&::before {
				background-size: 28px 28px;
			}

			&:focus,
			&:active {
				outline: none;
			}
			&.done {
				opacity: 0;
			}
			&.loading {
				opacity: 1;
				padding: 0;
			}
		}
	}
	&.classic > .alm-btn-wrap .alm-load-more-btn {
		&::before {
			background-image: url(get-loader());
		}
	}
	&.circle-spinner > .alm-btn-wrap .alm-load-more-btn {
		&::before {
			background-image: url(get-circle-spinner());
		}
	}
	&.fading-circles > .alm-btn-wrap .alm-load-more-btn,
	&.fading-squares > .alm-btn-wrap .alm-load-more-btn,
	&.ripples > .alm-btn-wrap .alm-load-more-btn {
		&::before {
			background-size: 38px 38px;
		}
	}
	&.fading-circles > .alm-btn-wrap .alm-load-more-btn {
		&::before {
			background-image: url(get-fading-circles());
		}
	}
	&.fading-squares > .alm-btn-wrap .alm-load-more-btn {
		&::before {
			background-image: url(get-fading-squares());
		}
	}
	&.ripples > .alm-btn-wrap .alm-load-more-btn {
		&::before {
			background-image: url(get-ripples());
		}
	}
}

// Horizontal.
.ajax-load-more-wrap.alm-horizontal {
	.alm-btn-wrap {
		display: flex;
		align-items: center;
		padding: 0;
		margin: 0;
		button {
			margin: 0;
			&.done {
				display: none;
			}
		}
	}
}
