// COMPONENT : Pagination
// MUST IMPORT COMPONENTS/BUTTONS AND COMPONENTS/BUTTON-BARS

.pagination {

	&.desktop {
		@include hide;

		@include min-screen-size(large) {
			@include show(flex);
		}
	}

	&.mobile {
		@include max-screen-size(small) {
			.skip {
				@include hide;
			}
		}

		@include min-screen-size(large) {
			@include hide;
		}
	}

	.button-bar {
		.active {
			color: $grey-7;
			background-color: $grey-1;
			font-weight: $bold;
		}
	}

	.button {
		display: flex;
		align-items: center;

		&.ellipsis {
			box-shadow: inset 1px 0 0 0 $secondary-button-border-color;

			&:hover {
				background-color: transparent;
				cursor: default;
			}
		}

		span:nth-child(2) {
			padding-left: .192em;
		}
	}

	display: flex;
	flex-direction: row;
	justify-content: center;

	.arrow {
		font-size: 2em;
		line-height: 0;
		margin-bottom: .2em;
	}
}