/*--------------------------------------------------*/
/*	OVERRIDES
/*--------------------------------------------------*/

section.carousel {
/*
	padding: 0 !important;
*/
}

.carousel .list::-webkit-scrollbar {
	display: none;
}

/* cards only */
.carousel .list > *.card:hover:after,
.carousel .list > *.card:focus:after {
	border-radius: 5px;
}

/*--------------------------------------------------*/
/*	GENERAL
/*--------------------------------------------------*/

.carousel .list {
	width: 100%;

	white-space: nowrap;
	overflow: hidden;
}

.carousel .list > * {
	display: inline-block;
	width: 256px;
	margin: 15px;

    vertical-align: middle;
	overflow: hidden;
}

.carousel .list > *:nth-child(n+2) {
	margin-left: 0;
}

.carousel nav {
	display: flex;
	justify-content: center;

	width: 100%;
	padding: 8px;
}

.carousel nav label {
	width: 8px;
	height: 8px;

	background: var(--color-disabled);
	border-radius: 4px;
}

.carousel nav label.active {
	background: var(--color-gray);
}

.carousel nav label:nth-child(n+2) {
	margin-left: 4px;
}

/*--------------------------------------------------*/
/*	BUTTONS
/*--------------------------------------------------*/

.carousel button.prev,
.carousel button.next {
	z-index: 9;
	cursor: pointer;
	position: absolute;

	width: 48px;
	height: 48px;

	background: var(--background);
	border-radius: 32px;
}

.carousel button.prev,
.carousel button.next {
	top: calc(50% - 24px);
}

.carousel button.prev {
	left: 15px;
}

.carousel button.next {
	right: 15px;
}

.carousel button.prev:after,
.carousel button.next:after {
	font-family: Material-Design-Iconic-Font;

	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;

	font-size: 32px;
	line-height: 48px;

	color: var(--text);
	border-radius: 32px;
}

/* dont use :focus */
.carousel button.prev:hover:after,
.carousel button.next:hover:after {
	color: var(--color-purple);
}

.carousel button.prev:after {
	content: "\f2fa";
}

.carousel button.next:after {
	content: "\f2fb";
}

/* disabled */
.carousel button.prev:disabled:after,
.carousel button.next:disabled:after,
.carousel button.prev:disabled,
.carousel button.next:disabled {
	color: var(--color-disabled);
	background: var(--color-disabled-light);
}

/*--------------------------------------------------*/
/*	STATES
/*--------------------------------------------------*/

.carousel .list > *:hover,
.carousel .list > *:focus {
	color: var(--color-purple);
}

.carousel .list > *:hover:after,
.carousel .list > *:focus:after {
	z-index: 2;
	content: " ";
	position: absolute;
	top: 0;
	right: 0;

	width: 100%;
	height: 100%;

	border: 3px solid var(--color-purple);
}

/* remove buttons on touch devices */
@media (pointer: coarse) {
	.carousel button {
		display: none !important;
	}
}