@use "sass:math";
@use "global/common" as global;

/* ------------------------------
 ページャー
------------------------------- */
.acms-pager {
	display: inline-block;
	margin-right: 10px;
	margin-left: 10px;
	padding: 0;
	color: #333;
	list-style: none;
	@include global.font-size(13);
	@include global.clearfix();

	// ページ
	li {
		float: left;
		margin-left: 4px;
		text-align: center;
		// 最初の1件
		 &:first-child {
			margin-left: 0;
		}
		// リンク
		> a:link {
			text-decoration: none;
		}
		// ページの見栄え
		span > a,
		 &.cur span,
		 &.cur button,
		> a,
		> button {
			@include global.button-shape();
			@include global.button-decoration();
			padding: 14px;
			color: #333;

		}
		 &.cur span,
		 &.cur button {
			text-decoration: none;
			 background-color:#EFEFEF;
			 border: 1px solid global.$acms-btn-active-border-color;
		}
		// active
		> a:active,
		> button:active {
			background-color:#D0D0D0;
			border: 1px solid global.$acms-btn-active-border-color;
		}
	}
}

// デスクトップ対応
@media (min-width : global.$breakpoint-md-min) {
	.acms-pager {
		margin-right: 0;
		margin-left: 0;
		// ページ
		li {
			span > a,
			 &.cur span,
			 &.cur button,
			> a,
			> button {
				@include global.button-shape(
					$padding: (math.div(global.$acms-form-height - global.$acms-btn-font-size-desktop - 2px, 2)) global.$acms-btn-padding-x
				);
			}
		}
	}
}
