@charset "utf-8";

/* ============================================================
 * 공통 페이지네이션 (Pagination Renewal)
 *
 * 마크업: app_okems_3/views/component/pagination_common_view.php
 * 헬퍼  : app_okems_3/helpers/pagination_helper.php
 *
 * 기존 .pagination / .page_count / .pagination-square 와 클래스명이
 * 겹치지 않으므로, 구/신 마크업이 공존해도 서로 간섭하지 않는다.
 * ============================================================ */

/* BUTTON */
.wrap-page [class*="BtnType"] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    position: relative;
    border-radius: 4px;
    text-align: center;
    font-family: "Noto Sans KR", sans-serif;
    vertical-align: top;
}

/* BUTTON - SIZE */
.wrap-page [class*="BtnType"].SizeS {
    height: 32px;
    padding: 4px 7px;
    font-size: 13px;
    line-height: 20px;
}

/* BUTTON - STATE */
.wrap-page [class*="BtnType"]:hover {
    background-color: #f3f5fa;
    border-color: #253B8B;
}

/* Pagination */
.wrap-page {
    display: flex;
    justify-content: center;
    margin: 40px 0;
}
/* 페이지 수를 비동기로 받는 목록 - 실제 페이지 수를 모르므로
   칸 수를 암시하지 않는 스피너를 보여주고, AJAX 응답으로 실제 페이지네이션을 채운다 */
.pagination-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 40px 0;
}
.wrap-page .BtnType {
    display: flex;
    position: relative;
    /* 3자리 페이지 번호(100~)가 잘리지 않도록 width 대신 min-width */
    min-width: 32px;
    border: 1px solid #dddfe5;
    color: #7b7b7b;
    background-color: #fff;
    align-items: center;
    justify-content: center;
    transition: all 0.1s;
}
.wrap-page .BtnType:nth-last-child(2) {margin: 0;}
.wrap-page .BtnType.active {
    border: 1px solid #253B8B;
    font-weight: bold;
    color: #253B8B;
}
.wrap-page .BtnType:hover {
    background: #ebefff;
    color: #253B8B;
}
.wrap-page .BtnType.active:hover {background: none;}
.wrap-page .BtnPrev {margin-left: 0; margin-right: 16px;}
.wrap-page .BtnNext {margin-left: 16px;}
.wrap-page .BtnPrev:hover,
.wrap-page .BtnNext:hover {color: #253B8B;}
.wrap-page .BtnPrev:after,
.wrap-page .BtnNext:after {
    content: "";
    width: 8px;
    height: 8px;
    position: absolute;
    top: calc(50%);
    border-style: solid;
    border-color: #7b7b7b;
    transform: translate(-50%, -50%) rotate(45deg);
    z-index: 2;
}
.wrap-page .BtnPrev:hover::after {border-color: #253B8B;}
.wrap-page .BtnNext:hover::after {border-color: #253B8B;}
.wrap-page .BtnPrev:after {left: 17px; border-width: 0 0 1px 1px;}
.wrap-page .BtnNext:after {right: 9px; border-width: 1px 1px 0 0;}
.wrap-page .BtnType+.BtnType {margin-left: 4px;}
.wrap-page .BtnType+.BtnNext {margin-left: 16px;}
.wrap-page .BtnPrev+.BtnType {margin-left: 0;}