@import "../../../../assets/less/core/boot.less";

//
// Lists
// --------------------------------------------------

@import "list.structure.less";
@import "list.rowlink.less";

//
// Override Bootstrap
//

.control-list {
    table.table.data thead {
        td, th {
            border: none;
        }
    }

    .table > :not(:first-child) {
        border-top: none;
    }

    .table > :not(caption) > * > * {
        border-bottom-width: 0;
    }
}

//
// Page Chooser
//

.control-list-page-chooser {
    .input-group {
        flex-wrap: nowrap;
    }

    input[type=number] {
        -moz-appearance: textfield;
    }

    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
}

//
// List Data Table
//

table.table.data {
    .list-head-icon(@icon) {
        > span, > a {
            &:after {
                font-size: 14px;
                line-height: 14px;
                display: inline-block;
                margin-left: 6px;
                vertical-align: baseline;
                opacity: .4;
                .icon(@icon);
            }
            &:hover:after { opacity: .8; }
        }
    }

    font-size: @font-size-base;
    border-bottom: 1px solid @border-color;

    &.no-offset-bottom {
        margin-bottom: 0 !important;
    }

    thead {
        background: @tertiary-bg;

        td, th {
            border-width: 1px;
            border-top: 1px solid @border-color !important;
            border-bottom: 1px solid @border-color !important;
            border-color: @border-color;
            padding: 0;
            font-weight: 600;
            font-size: @font-size-base;
            white-space: nowrap;
            background-color: inherit;

            > a, > span {
                display: block;
                padding: 10px 15px;
                color: @text-color;
                text-decoration: none;
                &:hover { color: var(--bs-emphasis-color) }
            }

            &.explicit-left-padding {
                > a, > span {
                    padding-left: 0;
                }
            }

            &.sort-desc { .list-head-icon(@icon-angle-down); }
            &.sort-asc { .list-head-icon(@icon-angle-up); }

            &.active {
                text-decoration: underline;
                color: @emphasis-color;

                &:hover {
                    text-decoration: none;
                }

                > span, > a {

                    &:after {
                        text-decoration: none;
                        color: @color-list-active-sort;
                        opacity: 1 !important;
                    }
                }
            }
        }

        tr th:first-child {
            // padding-left: 7px;
        }

        tr th:last-child a {
            padding-right: 25px;
        }

        .list-checkbox .custom-checkbox {
            top: -22px;
        }
    }

    tbody {
        tr {
            background-color: var(--bs-table-bg);
        }
        tr:nth-child(even) {
            td, th {
                background-color: var(--bs-table-striped-bg);
            }
        }

        td, th {
            padding: 10px 15px;
            color: var(--bs-table-color);
            border-top: 1px solid var(--bs-table-border-color);

            strong {
                font-weight: 600;
            }

            div.progress {
                position: relative;
                overflow: visible;
                height: auto;
                margin-bottom: 0;
                background-color: transparent;
                border-radius: 0;
                box-shadow: none;

                div.bar {
                    position: absolute;
                    left: -15px;
                    top: -11px;
                    bottom: -11px;
                    background: @color-list-progress-bg;
                    opacity: .3;
                }

                a {
                    position: relative;
                }
            }
        }

        tr:first-child {
            th, td {
                border-top: none;
            }
        }

        tr:last-child {
            th, td {
                // border-bottom: 1px solid var(--bs-border-color);
            }
        }

        tr td:first-child {
            // padding-left: 20px;
        }

        tr.active,
        tr.selected {
            &:not(.no-data) td {
                color: var(--bs-table-hover-color);
                background-color: var(--bs-table-hover-bg);
            }
        }

        &:not(.tree-drag-mode) {
            tr.rowlink:not(.nolink):not(.active):hover td,
            tr:not(.no-data):not(.active).selected td {
                color: var(--bs-table-hover-color);
                background-color: var(--bs-table-hover-bg);

                // When hover is white, this targets common objects
                // a:not(.btn), span, i[class^="icon-"] {
                //    color: @color-list-hover-text;
                // }
            }

            tr.rowlink:not(.nolink).active:hover td,
            tr:not(.no-data).active.selected td {
                background: var(--oc-table-active-bg);
            }
        }

        tr.sortable-chosen {
            position: relative;
            z-index: 1;

            td {
                color: var(--bs-table-hover-color);
                background-color: var(--bs-table-hover-bg);
            }
        }

        // tr.rowlink:not(.nolink):active td {
        //     background: @color-list-hover-bg-active !important;
        //     color: @color-list-active-text;
        // }

        tr:focus {
            outline: none;
        }

        tr.hidden {
            td, th, td a, th a {
                display: none;
            }
        }

        tr.strike {
            td, th, td a, th a {
                text-decoration: line-through;
            }
        }

        tr.frozen {
            td, th, td a, th a {
                color: #337ab7;
            }
        }

        tr.processing {
            td, th, td a, th a {
                color: #666666;
            }
        }

        tr.negative {
            td, th, td a, th a {
                color: #b2341c;
            }
        }

        tr.positive {
            td, th, td a, th a {
                color: #278731;
            }
        }

        tr.disabled, tr.deleted {
            td, th, td a, th a {
                color: #888888;
            }
        }

        tr.new, tr.important {
            td, th, td a, th a {
                font-weight: 600;
            }
        }

        tr.safe, tr.special {
            td, th, td a, th a {
                color: #98a7a8;
            }
        }

        td.column-break-word {
            word-wrap: break-word;
            word-break: break-all;
        }

        // Requires "max-width" with px value
        td.column-single-line {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        td.column-slim {
            padding-left: 0;
            padding-right: 0;
        }

        td.column-compact {
            padding: 0;
        }

        td.column-button {
            padding: 5px;
        }

        &.icons {
            td i[class^="icon-"] {
                display: inline-block;
                margin-right: 7px;
                font-size: 15px;
                color: #95a5a6;
                position: relative;
                top: 1px;
            }
        }

        &.clickable {
            cursor: pointer;
            user-select: none;
        }
    }

    &.no-active-indicator tbody {
        tr td:first-child {
            border-left: none;
        }
    }

    tfoot {
        a {
            color: @color-list-text;
            text-decoration: none;
        }
        td, th {
            border-color: @border-color;
            padding: 10px 15px;
            // border-color: transparent;
            // padding: 10px 0;
        }
    }

    th.list-cell-type-switch,
    td.list-cell-type-switch {
        text-align: center;
    }

    th.list-cell-type-number,
    td.list-cell-type-number {
        text-align: right;
    }

    th.list-cell-align-left,
    td.list-cell-align-left {
        text-align: left;
    }

    th.list-cell-align-right,
    td.list-cell-align-right {
        text-align: right;
    }

    th.list-cell-align-center,
    td.list-cell-align-center {
        text-align: center;
    }

    th.list-cell-type-selectable,
    td.list-cell-type-selectable {
        white-space: nowrap;
    }

    th.list-cell-type-colorpicker,
    td.list-cell-type-colorpicker {
        width: 20px;
    }

    //
    // Labels
    //

    .list-badge {
        display: inline-block;
        position: relative;
        top: 0;
        margin: 0 5px 0 0;
        padding: 1px 0 0 0;
        font-size: 10px;
        width: 15px;
        height: 15px;
        text-align: center;
        border-radius: @border-radius-base;
        color: #fff;

        > i {
            position: relative;
            top: -1px;
        }

        &.badge-default {
            background: @gray-light;
        }

        &.badge-primary {
            background: @brand-primary;
        }

        &.badge-success {
            background: @brand-success;
        }

        &.badge-info {
            background: @brand-info;
        }

        &.badge-warning {
            background: @brand-warning;
        }

        &.badge-danger {
            background: @brand-danger;
        }
    }

    .list-switch {
        border-radius: 100px;
        display: inline-block;
        width: 20px;
        height: 20px;
        text-align: center;
        &.is-true {
            background-color: @brand-success;
            color: #fff;
        }
        &.is-false {
            background-color: @secondary-bg;
            color: @text-color;
        }
    }

    //
    // Link List
    //

    ul.list-link-list {
        list-style: none;
        padding: 0;
        margin: 0;

        > li {
            display: inline-block;

            &:after {
                content: ', ';
            }

            &:last-child {
                padding-right: 0;

                &:after {
                    content: '';
                }
            }

            a {
                text-decoration: underline;
            }
        }
    }

    //
    // Image
    //

    .list-image-thumbs {
        margin-top: -7px;
        margin-bottom: -7px;
    }

    .list-image-thumb {
        display: inline-block;
        position: relative;
        margin-top: 1px;
        margin-bottom: 1px;

        &:after {
            content: '';
            display: block;
            position: absolute;
            box-shadow: inset 0px 0px 0px 1px rgba(127, 140, 141, .25); // #7f8c8d
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            z-index: 2;
            border-radius: 4px;
        }

        > img {
            border-radius: 4px;
        }

        &.is-default-size {
            width: 34px;
            height: 34px;
            > img {
                height: 100%;
                width: 100%;
                object-fit: cover;
            }
        }
    }

    //
    // Selectable Badge
    //

    .list-selectable {
        background: @toolbar-bg;
        border: 1px solid @toolbar-border;
        border-radius: 6px;
        display: inline-block;
        padding: 0 8px;
        height: 28px;
        line-height: 26px;
        margin-top: -10px;
        margin-bottom: -10px;
        white-space: nowrap;

        i {
            display: inline-block;
            margin-right: 3px;
            margin-left: 3px;
            text-align: center;
        }
    }

    //
    // Color Picker
    //

    .list-colorpicker {
        width: 0;
        height: 0;
        background-color: transparent;
        border-right-color: var(--background-color);
        border-top-color: var(--background-color);
        border-bottom-color: var(--background-color);
        border-left-color: var(--background-color);
        border-width: 10px;
        border-style: solid;
        border-radius: 20px;
        display: inline-block;
        position: relative;

        // Offset the table padding
        margin-top: -5px;
        margin-bottom: -5px;

        &:after {
            content: "";
            top: -10px;
            left: -10px;
            width: 20px;
            height: 20px;
            position: absolute;
            box-shadow: inset 0 0 0 1px rgba(53, 66, 91, .15);
            border-radius: 20px;
        }

        &.is-twotone {
            border-top-color: var(--foreground-color);
            border-left-color: var(--foreground-color);
        }
    }

    //
    // Checkbox
    //

    .list-checkbox {
        width: 42px;
        vertical-align: top;
        border-right: 1px solid var(--bs-table-border-color);
    }

    tbody tr td.list-checkbox {
        padding-left: 15px;
    }

    thead tr th.list-checkbox {
        padding: 10.5px 0 0 15px;
    }
}

//
// List containers
//

.list-preview {
    padding: 0;
    margin-bottom: 20px;
    background: white;
    border: 1px solid @border-color;

    .list-header:first-child {
        padding-top: 20px;
    }

    .control-list:last-child {
        margin-bottom: 0;
    }

    .control-list:last-child > table {
        border-bottom: none;
    }
}

// List to sit flush to the element above (no toolbar)
.list-flush {
    table.table.data {
        thead tr th {
            border-top: none !important;
        }
    }
}

// List with sidebar
.list-with-sidebar {
    display: flex;

    .sidebar-area {
        flex-shrink: 0;
        flex-basis: 180px;
        width: 180px;
    }

    .sidebar-list {
        flex-grow: 1;
        width: 0;
    }
}

@media (max-width: @screen-sm-max) {
    .list-with-sidebar {
        display: block;

        .sidebar-area {
            width: auto;
            flex-shrink: inherit;
            flex-basis: inherit;
            margin: 0 20px 20px;
        }

        .sidebar-list {
            flex-grow: inherit;
            width: auto;
        }
    }
}


//
// List control
//

.control-list {
    margin-bottom: @line-height-computed;

    p.no-data {
        padding: 18px 20px;
        margin: 0 20px;
        color: @color-list-norecords-text;
        font-size: @font-size-base;
        text-align: center;
        border-radius: @border-radius-base;
    }

    table.table.data {
        margin-bottom: 0;

        .list-setup {
            width: 48px;
            vertical-align: middle;

            a {
                padding: 8px 15px;
                > span {
                    display: block;
                    color: @toolbar-color;
                    background: @toolbar-bg;
                    width: 24px;
                    height: 24px;
                    text-align: center;
                    border-radius: 3px;

                    &:before {
                        font-size: 14px;
                        line-height: 14px;
                        .icon(@icon-list-ul);
                        display: inline-block;
                        vertical-align: middle;
                    }
                }

                &:hover > span {
                    color: @toolbar-hover-color;
                    background: @toolbar-hover-bg;
                }
            }

            &.setup-show-structure a > span:before {
                .icon(@icon-sitemap);
            }
        }
    }

    &.list-rowlink tbody {
        td, th {
            a:not(.btn,.dropdown-item) {
                color: @color-list-text;
                &:hover {
                    text-decoration: none;
                }
            }
        }
    }
}

.list-widget-container {
    border-radius: @border-radius-large;
    border: 1px solid @border-color;
    // background-color: var(--bs-table-bg);
    // border-top: 2px solid var(--oc-border-color);
    overflow: hidden;

    > .control-filter {
        background-color: var(--oc-form-control-bg);
        border-top: none;

        > .filter-group > .filter-scope {
            padding: 10px;
        }
    }

    > .list-widget {
        table.table.data thead th {
            border-top: none !important;
        }

        .control-list table.table.data {
            border-bottom: none;
        }
    }
}

.list-widget-container {
    margin: 0 @padding-standard @padding-standard;

    > .list-widget > .control-list {
        margin-bottom: 0;
    }
}

@media (max-width: @screen-xs-max) {
    .list-widget-container {
        margin: 0 0 @padding-standard;
        border-radius: 0;
        border: none;
    }
}

.list-header {
    background-color: transparent;
    padding: 0 @padding-standard 1px @padding-standard;

    h3 {
        font-size: 14px;
        color: @color-status-list-text;
        text-transform: uppercase;
        font-weight: 600;
        margin-top: 0;
        margin-bottom: 15px;
    }
}

.list-footer {
    padding: 5px 10px;
    // padding: 5px 0;
    border-top: 1px solid @border-color;

    a {
        color: @color-list-text;
        text-decoration: none;
    }

    .list-pagination {
        display: flex;

        .list-pagination-summary {
            padding: .475rem 5px;
            font-size: .9rem;
        }

        .list-pagination-links {
            ul.pagination {
                margin-bottom: 0;

                .page-link {
                    border-radius: 4px;
                    border-color: transparent;
                    box-shadow: none;
                }

                li.disabled .page-link {
                    color: #98a7a8;
                    background-color: transparent;
                }
            }
        }
    }

    @media (max-width: @screen-md) {
        .list-pagination {
            flex-direction: column-reverse;

            .list-pagination-links {
                margin-bottom: .5rem;
            }
        }
    }
}

.report-widget {
    .table-container {
        margin: -15px;

        table.table.data {
            margin-bottom: 0;

            thead tr {
                th {
                    border-top: none !important;
                }
            }

            tbody {
                tr:nth-child(even) {
                    td, th { background-color: transparent; }
                }
            }
        }
    }
}

//
// Scrollable list control
//

.list-scrollable-container {
    touch-action: auto;
    position: relative;

    > .list-scrollable {
        .horizontal-scroll-shadow();

        &:after, &:before {
            bottom: auto;

            // Height of the header
            height: 40.5px;
        }

        &:before {
            left: 0;
        }

        &:after {
            right: 0;
        }

        &.scroll-after th ,
        &.scroll-before th {
            cursor: move;
            a {
                cursor: pointer;
            }
        }

        > .list-content {
            overflow-x: auto;
        }
    }
}