@import 'core/css/variables';

.daiquiri-table {
    margin-bottom: 20px;

    h3.popover-title {
        padding: 9px 14px;
        line-height: 20px;
    }

    .daiquiri-table-header {

        .daiquiri-table-search {
            margin: 0 0 10px 0;
        }
        .pagination {
            margin: 0 0 10px 0;
        }
        @media(max-width: $screen-xs-max) {
            .pull-right {
                float: none!important;
            }
        }
    }

    .daiquiri-table-pane {
        border: 1px solid $border-color;
        border-radius: 4px;
        width: auto;
        overflow-x: auto;
        table-layout: fixed;
        width: 100%;

        .table {
            margin: 0;
            table-layout: fixed !important;

            th,
            td {
                width: 200px;
                padding: 0;
                border-right: 1px solid $border-color;

                &:last-child,
                &:last-child {
                    border-right: none;
                }
            }
            tr {
                &.selected {
                    background-color: $table-active-background-color;
                }
            }
            th.daiquiri-table-check {
                width: 32px;

                @media(max-width: $screen-md-max) {
                    width: 40px;
                }
            }
            .daiquiri-table-cell,
            .daiquiri-table-check {
                white-space: nowrap;
                padding: 8px;
                position: relative;
                overflow: hidden;
            }
            .daiquiri-table-check {
                white-space: nowrap;
                padding: 9px 4px 7px 6px;
                text-align: center;
            }


            // tr.active {
            //     td.active {
            //         .cell {
            //             background-color: $table-active-background-color;
            //         }
            //     }
            // }
            th {
                position: relative;

                .name {
                    overflow: hidden;
                }
                .info {
                    position: absolute;
                    z-index: 1000;
                    top: 8px;
                    bottom: 8px;
                    right: 24px;
                    opacity: 0.2;
                }
                .order {
                    cursor: pointer;
                    position: absolute;
                    z-index: 1000;
                    top: 8px;
                    bottom: 8px;
                    right: 8px;

                    i {
                        //margin-top: 2px;
                        opacity: 0.2;
                    }
                    i.ordered {
                        opacity: 1;
                    }
                }
                .handle {
                    position: absolute;
                    z-index: 2000;
                    top: 0;
                    bottom: 0;
                    right: -9px;
                    width: 17px;
                }
                .handle:hover {
                    cursor: move;
                }
            }

            &.no-select {
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                -o-user-select: none;
                user-select: none;
            }
        }
    }

    .daiquiri-table-footer {
        margin-top: 10px;

        .daiquiri-table-count {
            line-height: 34px;
        }
        .daiquiri-table-page-size {

        }
    }
}

.daiquiri-table-modal {
    .modal-body {
        min-height: 100px;

        ul {
            margin-top: 40px;
            margin-bottom: 40px;
        }
    }

    .modal-pagination {
        a {
            position: absolute;
            z-index: 1100;

            display: block;

            opacity: 0.1;

            width: 40px;
            height: 56px;

            &:hover {
                opacity: 1.0;
            }
        }

        .modal-pagination-left,
        .modal-pagination-right {
            top: 50%;
        }
        .modal-pagination-left {
            left: 5px;
        }
        .modal-pagination-right {
            right: 5px;
        }
        .modal-pagination-up,
        .modal-pagination-down {
            left: 50%;
            margin-left: -30px;
        }
        .modal-pagination-up {
            top: 50px;
        }
        .modal-pagination-down {
            bottom: 55px;
        }
    }
}
