@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;
        }

        .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;
                    }
                }
            }

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

        .tac {
            text-align: center !important;
        }
        .img-priview-dialog {
            .ant-modal-content {
                background-color: transparent;
                img {
                    margin: auto;
                    display: block;
                }
            }
        }

    }

}
