@import "variables.css";
@import "button.css";
@import "form.css";

/* COMMON */
*, ::after, ::before {
    box-sizing: border-box;
    line-height: normal;
    font-weight: 400;
}

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: var(--m-body-scroll);
}

html body {
    font-size: 16px;
    color: var(--m-body-color);
    font-family: Pretendard, sans-serif;
    font-weight: 400;
    line-height: normal;
    background: var(--m-body-background);
    background-size: var(--m-body-background-size);
}

/* TUI Grid */
.tui-grid-container * {
    box-sizing: border-box;
}

.tui-grid-cell-has-input .tui-grid-cell-content {
    padding: 0;
}

.tui-grid-table {
    font-size: 14px;
    font-family: Pretendard, sans-serif;
}

.tui-grid-table th {
    border-top: 2px solid #000;
}

.tui-grid-cell-header {
    font-weight: 700;
}

.tui-grid-cell {
    padding: 0 1rem;
}

.tui-grid-body-container tr {
    cursor: pointer;
}

.tui-grid-table tr:not(:first-child) th {
    border-top: 1px solid var(--m-line-color-200);
}

.tui-grid-header-area:has( + .tui-grid-body-area .tui-grid-cell.ps-5) th {
    padding-left: 3rem;
}

/* grid에서 고정형일 경우 백그라운드 색상 처리 */
.tui-grid-container tr:has(.fixed-row) td {
    background-color: var(--m-line-color-100);
}

/* TUI Grid Pagination */
.tui-pagination * {
    box-sizing: border-box;
}

.tui-grid-container .tui-grid-pagination,
.tui-pagination {
    height: 40px;
    margin: 0 0 30px 0;
}

/* 버튼 기본 */
.tui-pagination .tui-page-btn {
    width: fit-content;
    min-width: 40px;
    min-height: 40px;
    font-size: 16px;
    padding: 0 5px;
    line-height: 40px;
    border: none;
    border-radius: 5px;
}

/* 버튼 hover */
.tui-pagination .tui-page-btn:hover {
    background-color: transparent;
    box-shadow: 0 0 0 1px var(--m-button-color-300) inset;
}

/* 버튼 focus */
.tui-pagination .tui-page-btn:focus {
    background-color: transparent;
    box-shadow: 0 0 0 1px var(--m-button-color-300) inset;
}

/* 선택된 페이징 버튼 */
.tui-pagination .tui-page-btn.tui-is-selected {
    background-color: var(--m-button-color-300);
    border: none;
}

/* 아이콘 포함한 버튼 기본 스타일 */
.tui-first, .tui-prev, .tui-next, .tui-last, .tui-prev-is-ellip, .tui-next-is-ellip {
    height: 40px;
    box-shadow: 0 0 0 1px #cecece inset;
}

.tui-first, .tui-next {
    margin-right: 10px;
}

/* 아이콘 포함한 버튼 disabled */
.tui-pagination .tui-page-btn.tui-is-disabled.tui-first, .tui-pagination .tui-page-btn.tui-is-disabled.tui-prev, .tui-pagination .tui-page-btn.tui-is-disabled.tui-next, .tui-pagination .tui-page-btn.tui-is-disabled.tui-last, .tui-pagination .tui-page-btn.tui-is-disabled.tui-prev-is-ellip, .tui-pagination .tui-page-btn.tui-is-disabled.tui-next-is-ellip {
    background-color: var(--m-color-FEF);
    box-shadow: 0 0 0 1px var(--m-button-color-100) inset;
}

/* 아이콘 */
.tui-pagination .tui-page-btn .tui-ico-first, .tui-pagination .tui-page-btn .tui-ico-prev, .tui-pagination .tui-page-btn .tui-ico-next, .tui-pagination .tui-page-btn .tui-ico-last, .tui-pagination .tui-page-btn .tui-ico-ellip {
    filter: brightness(0);
}

/* 아이콘 비활성화 */
.tui-pagination .tui-page-btn.tui-is-disabled .tui-ico-first, .tui-pagination .tui-page-btn.tui-is-disabled .tui-ico-prev, .tui-pagination .tui-page-btn.tui-is-disabled .tui-ico-next, .tui-pagination .tui-page-btn.tui-is-disabled .tui-ico-last, .tui-pagination .tui-page-btn.tui-is-disabled .tui-ico-ellip {
    filter: brightness(0);
}

/* 더보기 버튼 */
.tui-pagination .tui-ico-ellip {
    vertical-align: middle;
    margin-top: 0;
}

.tui-pagination .tui-prev-is-ellip.tui-first-child {
    margin-right: 10px;
}

.tui-pagination .tui-next-is-ellip.tui-last-child {
    margin-left: 10px;
}