@import '../variable';

:global {
    html, body, #root {
        height: 100vh !important;
        height: 100%;
    }
    #root {
        display: flex;
        flex-direction: column;

        .ant-btn,
        .ant-btn-ghost,
        .ant-pagination-item,
        .ant-pagination-prev,
        .ant-pagination-next {
            &:focus,
            &:hover {
                color: @primary-color;
                border-color: @primary-color;
            }
        }
        .ant-btn-primary,
        .ant-pagination-item-active {
            background-color: @primary-color;
            border-color: @primary-color;
            &:hover {
                color: #fff;
            }
        }

        .ant-input,
        .ant-select-selection {
            &:focus,
            &:hover {
                border-color: @primary-color;
            }
            &:focus {
                box-shadow: 0 0 0 2px rgba(76, 150, 137, 0.2);
            }
        }
        .ant-btn-group {
            .ant-btn-primary {
                &:last-child:not(:first-child),
                & + .ant-btn {
                    border-left-color: @primary-color;
                }
            }
        }
        .ant-pagination-prev:hover,
        .ant-pagination-next:hover,
        .ant-pagination-item:hover {
            a {
                color: @primary-color;
            }
        }
        .ant-pagination-item-active:hover {
            a {
                color: #fff;
            }
        }
        .ant-pagination-disabled:hover {
            border-color: #d9d9d9;
            a {
                color: #ccc;
            }
        }
        .ant-table {
            th, td {
                padding: 10px 5px;
            }
        }

        .ant-form-item-with-help {
            margin-bottom: 10px;
        }

        .ant-tabs-vertical {
            .ant-tabs-nav {
                padding-top: 14px;
            }
        }
        .ant-tabs-vertical > .ant-tabs-bar .ant-tabs-tab {
            margin: 5px 0;
        }

        .ant-menu-vertical > .ant-menu-item,
        .ant-menu-inline > .ant-menu-item,
        .ant-menu-item-group-list > .ant-menu-item,
        .ant-menu-vertical > .ant-menu-submenu > .ant-menu-submenu-title,
        .ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title,
        .ant-menu-item-group-list > .ant-menu-submenu > .ant-menu-submenu-title {
            line-height: 36px;
            height: 36px;
        }
        .list-table {
            display: flex;
            flex-direction: column;
            height: 100%;
            overflow: hidden;
            align-items: center;

            .ant-table-header,
            .ant-table {
                &, table {
                    border-radius: 0;
                }
            }
            .ant-table {
                th, td {
                    &:first-child {
                        padding-left: 20px;
                    }
                    &:last-child {
                        padding-right: 20px;
                    }
                }
                th {
                    background-color: #eee;
                    .borderBottom;
                }
                tr {
                    &:nth-child(2n) {
                        background-color: #fcfcfc;
                    }
                    &.ant-table-row-hover,
                    &:hover {
                        background-color: #eaf8fe;
                    }
                }
            }

            & > div {
                &:first-child {
                    flex: 1;
                    width: 100%;
                }
            }
            .ant-table-pagination {
                margin: 10px 0;
            }
        }

        .tac {
            text-align: center !important;
        }

    }

    body {
        .ant-modal-mask {
            animation-duration: 300ms !important;
        }
        .img-priview-dialog {
            animation-duration: 300ms !important;
            height: 100vh;
            width: 100vw;
            display: flex;
            top: 0;
            align-items: center;
            justify-content: center;

            .ant-modal-content {
                background-color: transparent;
                padding-bottom: 0;
                img {
                    margin: auto;
                    display: block;
                    max-width: 100vw !important;
                    max-height: 100vh !important;

                }
                .ant-modal-close {
                    background: rgba(255, 255, 255, .25);
                    border-radius: 50%;
                    width: 20px;
                    height: 20px;
                    padding: 3px;
                    top: -10px;
                    right: -10px;
                }
                .ant-modal-body {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 0;
                }
            }
        }
    }

    .data-grid {
        border-spacing: 0;
        width: 100%;
        thead {
            th {
                background-color: #f8f8f8;
            }
        }
        td, th {
            border-bottom: 1px solid #e9e9e9;
            padding: 5px 5px;
            text-align: left;
            vertical-align: top;

        }
        &.tac {
            td, th {
                text-align: center;
            }
        }
    }
    ul.data-grid {
        width: 100%;
        & > li {
            display: flex;
            border-bottom: 1px solid #e9e9e9;
            & > span {
                padding: 5px 5px;
                text-align: left;
                flex: none;
                &.content {
                    flex: auto;
                }
            }
        }
    }

}
