hr,
.divider {
	--divider-width: 100%;
	--divider-margin: 1.5rem;
	--divider-gap: 0rem;
	--divider-border-color: rgba(var(--color-black-rgb), 0.15);
	--divider-text-color: var(--color-grey-alt);
}

hr,
.divider:empty {
	display: inline-block;
	border-color: var(--divider-border-color);
	border-width: 0;
	border-style: var(--border-style);
	border-top-width: var(--border-width);
	margin: var(--divider-margin) 0;
	width: var(--divider-width);
}

.divider:not(:empty) {
	display: grid;
	grid-template-columns: 1fr max-content 1fr;
	place-content: center;
	place-items: center;
	color: var(--divider-text-color);
	gap: var(--divider-gap);
	width: 100%;
}

.divider.text-left:not(:empty) {
	grid-template-columns: max-content 1fr;
}

.divider.text-right:not(:empty) {
	grid-template-columns: 1fr max-content;
}

.divider:not(:empty):not(.text-left)::before,
.divider:not(:empty):not(.text-right)::after {
	content: '';
	display: block;
	border-color: var(--divider-border-color);
	border-width: 0;
	border-style: var(--border-style);
	border-top-width: var(--border-width);
	width: var(--divider-width);
}

.divider:not(:empty):not(.text-left)::before {
	justify-self: end;
}

.divider:not(:empty):not(.text-right)::after {
	justify-self: start;
}

/*
    Divider Colors
*/
.divider-primary {
	--divider-border-color: rgba(var(--color-primary-rgb), 1);
}
.divider-secondary {
	--divider-border-color: rgba(var(--color-secondary-rgb), 1);
}
.divider-tertiary {
	--divider-border-color: rgba(var(--color-tertiary-rgb), 1);
}
.divider-cyan {
	--divider-border-color: rgba(var(--color-cyan-rgb), 1);
}
.divider-black {
	--divider-border-color: rgba(var(--color-black-rgb), 1);
}
.divider-white {
	--divider-border-color: rgba(var(--color-white-rgb), 1);
}
.divider-grey {
	--divider-border-color: rgba(var(--color-grey-rgb), 1);
}
.divider-light-grey {
	--divider-border-color: rgba(var(--color-light-grey-rgb), 1);
}
.divider-dark-grey {
	--divider-border-color: rgba(var(--color-dark-grey-rgb), 1);
}

/* 
    Divider width 
*/
.divider-short {
	--divider-width: 6rem;
}

.divider-medium {
	--divider-width: 10rem;
}

.divider-long {
	--divider-width: 14rem;
}

.divider-full {
	--divider-width: 100%;
}

/* 
    Divider margins 
*/
.divider-compact {
	--divider-margin: 1rem;
}

.divider-comfortable {
	--divider-margin: 2rem;
}

@media (max-width: 1023px) {
	.divider-list {
		display: flex;
		flex-direction: column;
		align-content: stretch;
		align-items: stretch;
		justify-content: center;
		flex-wrap: nowrap;
		border: 1px solid var(--color-secondary);
		border-radius: .5rem;

		color: #fff;
		gap: 0;
		text-transform: uppercase;
		position: relative;
	}

	.divider-item {
		padding: 1.3rem 1.5rem;
		flex: 1 1 auto;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		flex-wrap: nowrap;
		font-size: 1.4rem;
		font-weight: 700;
		gap: 0.5rem;
		width: 100%;
	}

	.divider-item {
		border-bottom: .1rem solid var(--color-secondary);
	}

	.divider-item i {
		color: var(--color-secondary);
	}

	.divider-list > div:last-child .btn {
		border-top-left-radius: 0 !important;
		border-top-right-radius: 0 !important;
		--border-radius-buttons: .5rem !important;
		width: 100%;
	}

}

@media (min-width: 1024px) {
	.divider-list {
		display: inline-flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		flex-wrap: nowrap;

		border: 1px solid var(--color-secondary);
		border-radius: 2.6rem;

		color: #fff;
		gap: 0;
		height: 5rem;
		text-transform: uppercase;
		position: relative;
	}

	.divider-list::after,
	.divider-list::before {
		content: '';
		position: absolute;
		top: 50%;
		translate: 0 -50%;
		height: .1rem;
		width: 50vw;
		background-color: var(--color-secondary);
	}	

	.divider-list::after {
		left: 100%;
	}

	.divider-list::before {
		right: 100%;
	}

	.divider-list > div:last-child .btn {
		border-top-left-radius: 0 !important;
		border-bottom-left-radius: 0 !important;
	}

	.divider-item {
		padding: 1rem 1.5rem;
		flex: 1 1 auto;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		flex-wrap: nowrap;
		font-size: 1.4rem;
		font-weight: 700;
		gap: 0.5rem;
	}

	.divider-item:first-child {
		padding-left: 3rem;
	}

	.divider-item:last-of-type {
		padding-right: 3rem;
	}

	.divider-item i {
		color: var(--color-secondary);
	}

	.divider-item:last-child {
		background-color: var(--color-secondary);
	}
}