@import "../common/var.scss";
@import "../mixins/mixins.scss";

$table-border: 1px solid $color-gray--020;

.c-data-table__container {
    position: relative;
    overflow-x: auto;
}

.c-data-table {
    font-size: .9rem;
    width: 100%;
    min-width: 100%;
    border-collapse: collapse;
}

.c-data-table__sizer-body {
    display: none;
}

.c-data-table__row {
    border: $table-border;
    background-color: #fff;
}

.c-data-table__header {
    color: $color-gray--070;
    font-size: 1.1em;
    border-bottom: $table-border;
    border-bottom-width: 2px;

    // background needs to be applied on each th with background-clip: padding-box;
    // to make sure border appears correctly on firefox.
    th {
        background-color: $color-gray--000;
        background-clip: padding-box;
    }
}

.c-data-table__tooltip-icon {
    color: $color-gray--040;
    margin-left: $space2;
    align-self: flex-start;
    margin-top: .2rem;
}

.c-data-table__summary {
    color: $color-gray--070;
    font-size: 1.1em;
    border-top: $table-border;
    font-weight: bold;
}

.c-data-table__row--child {
    background-color: $color-gray--000;
    background-clip: padding-box;
}

.c-data-table__link,
.c-data-table__block--header {
    color: inherit;
    vertical-align: middle;
    font-weight: normal;

    &:hover, &:active, &:focus {
        color: inherit;
    }

    &:hover, &:focus {
        text-decoration: none;
    }
}
.c-data-table__link {
    cursor: pointer;
}
.c-data-table__block--header-sortable {
    cursor: pointer;
    user-select: none;
}

.c-data-table__row--striped:nth-child(even) {
    background-color: $color-gray--000;

    > .c-data-table__block--pinned {
        background-color: $color-gray--000;
    }
}

// cells that have checkboxes/radios
.c-data-table__block--action {
    padding: 0; // Form actions already have padding.
    width: 1rem;
    text-align: center;


    .el-radio .el-radio__label {
        @include hidden--accessible;
    }

    .el-radio__input {
        line-height: 1px;
        margin-bottom: 1px;
    }
}

.c-data-table__block {
    padding: 1rem;
    word-break: break-word;
    vertical-align: middle;
}

.c-data-table__block--header {
    padding: .8rem 1rem;
    text-align: left;
    position: relative;
    word-break: initial;
}

.c-data-table__resize-handle {
    height: 100%;
    width: 10px;
    cursor: ew-resize;
    position: absolute;
    z-index: 1;
    right: 0;
    top: 0;
    transform: translateX(50%);
    user-select: none;

    &:active {
        cursor: col-resize;
    }
}

.svg-inline--fa.c-data-table__collapse-arrow,
.svg-inline--fa.c-data-table__icon {
    width: .7em;
    font-size: .9em;
    color: $color-gray--060;
    transition: transform .3s;
}

.c-data-table__collapse-arrow--open {
    transform: rotate(90deg);
}

.c-data-table__triggers {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

.c-data-table__trigger:not(:last-child) {
    margin-right: $space2;
}

// loader/no-data rows
.c-data-table--loading, .c-data-table--empty {
    min-height: 15rem; // workaround for chrome
    .c-data-table__body {
        height: 12.5rem; // workaround for firefox (after accounting for header height)
        color: $color-gray--070;
    }
}

// nested tables (collapsible rows)
.c-data-table__collapsible-row {
    border: 0;
    width: 100%;

    // adjust borders for nested tables
    .c-data-table {
        border-radius: 0;
    }
    .c-data-table__header {
        border-radius: 0;
    }

    // loader/no-data rows
    .c-data-table--loading, .c-data-table--empty {
        .c-data-table__body {
            min-height: 8rem;
            background-color: rgba($color-gray--000, .3);
        }
    }
}

.c-data-table__collapsible-content {
    padding: 0;
}

// While the collapsible row is closed we don't want padding adding to the row height
.c-data-table__collapsible-block {
    padding: 0;
    // Padding should transition back to 0 quickly after a delay so it looks seamless
    transition: padding .1s;
    transition-delay: .25s;
}

.c-data-table__row--collapse-expanded + .c-data-table__collapsible-row > .c-data-table__collapsible-block {
    padding: .5rem 2.6rem 1rem;
    // Make sure the padding exists immediately when the user opens the collapsible row
    transition: padding 0s;
    transition-delay: .02s; // Need tiny delay to avoid a jump
}

.c-data-table__row--has-collapse-content {
    border-bottom-width: 0;
}

// specificity required to ensure styles don't leak into nested tables
.c-data-table--collapsible-nested {
    >.c-data-table__body {
        >.c-data-table__collapsible-row {
            background-color: transparent;
        }

        // tree-like nested look for collapsible content
        >.c-data-table__collapsible-row > .c-data-table__collapsible-block {
            padding: 0 0 0 1.3rem;

            >.c-data-table__collapsible-content > .c-data-table__collapsible-content__nested {
                position: relative;
                padding: 1.875rem;
                padding-right: 0;
            }
        }


        // same logic that `bordered` variant uses for animating bottom border on expand/collapse
        >.c-data-table__row--has-collapse-content {
            border-bottom-width: 0;
            transition: border-bottom-width .1s;
            transition-delay: .25s;

            &.c-data-table__row--collapse-expanded {
                border-bottom-width: 1px;
                transition: border-bottom-width 0s;
            }
        }
    }

    .c-data-table__collapsible-content__handle {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 2px;
        background-color: $color-gray--020;
        transition: .2s background-color;
        cursor: pointer;
        &:hover {
            background-color: $color-brand--055;
        }

        // as 2px is a very small area for users to hover over and click on, this creates an invisible
        // clickable area around the handle so it's easier for users to interact with it.
        &:after {
            content: "";
            position: absolute;
            width: 10px;
            height: 100%;
            top: 0;
            left: -4px; // 4px on each side of the 2px handle
        }
    }
}

.c-data-table__sort-caret {
    margin-left: $space2;
    color: $color-gray--040;
}

.c-data-table__pagination-container {
    display: flex;
    align-items: center;
    margin-top: $space3;
    flex-wrap: wrap;
    &:after {
        content: "";
        flex: 1;
    }
}
.c-data-table__pagination-info {
    flex: 1;
    font-size: .9rem;
    padding: $space2 0;
    white-space: nowrap;
}

// Mobile
@media (max-width: $screen-sm-max) {
    .c-data-table {
        border: none;
        display: flex;
        width: 100% !important; // enforce this to override whatever table width has been set using the resizable functionality
    }

    .c-data-table__body {
        display: flex;
        width: 100%;
        flex-direction: column;

        .c-data-table__block--action {
            position: absolute;
            width: auto;
            right: 0;
        }
    }

    .c-data-table__cell-mobile-label {
        color: $color-gray--040;
        display: block;
    }

    .c-data-table__row:not(.c-data-table__row--has-collapse-content) {
        margin-bottom: 1rem;
    }

    .c-data-table__row--collapse-expanded + .c-data-table__collapsible-row > .c-data-table__collapsible-block {
        padding: 0;
    }


    .c-data-table__row {
        border-radius: $--border-radius-base;
        border-bottom-width: 1px;

        &:first-child, &:last-child {
            border-radius: $--border-radius-base;
        }

        &:active, &:focus, &:hover {
            border-color: $color-brand--055;
        }

        &:not(.c-data-table__row--has-collapse-content) {
            margin-bottom: 1rem;
        }
    }

    .c-data-table__row--selectable {
        &:hover, &:focus, &:active {
            background-color: inherit !important; // we don't want any background color on phones
        }
    }

    .c-data-table__row--collapse-expanded {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        &:first-child, &:last-child {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }
    }

    .c-data-table__collapsible-row {
        position: relative;
        border-top-left-radius: 0;
        border-top-right-radius: 0;

        &::before {
            opacity: 1;
        }

        .c-data-table__outer-container {
            margin: 0;
        }

        .c-data-table {
            border-bottom-left-radius: $--border-radius-base;
            border-bottom-right-radius: $--border-radius-base;
        }

        .c-data-table__row {
            border-radius: 0;
            margin-bottom: 0;
        }

        .c-data-table__row {
            border-right-width: 1px;
        }
        .c-data-table__body > .c-data-table__row:last-child {
            border-bottom-width: 1px;
        }
    }

    .c-data-table__row--striped:nth-child(even) {
        background-color: $color-white;

        > .c-data-table__block--pinned {
            background-color: $color-white;
        }
    }

    .c-data-table__block {
        width: 100%;
        min-width: 100%;
        display: block;
        border: 0;
    }

    .c-data-table__collapsible-block {
        display: block;
    }

    .c-data-table__row--collapse-expanded {
        padding-bottom: 0 !important;
        &::before {
            content: none;
        }
    }

    .c-data-table__row--loading {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .c-data-table__triggers {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
    }

    .c-data-table--loading, .c-data-table--empty {
        .c-data-table__body {
            height: auto;
        }
    }

    .c-data-table--collapsible-nested {
        >.c-data-table__body {
            >.c-data-table__row {
                border-radius: 0;

                &:not(.c-data-table__row--has-collapse-content) {
                    margin-bottom: 0;
                }
            }
        }
    }
}

// Desktop only
@media (min-width: $screen-md-min) {
    .c-data-table__container {
        border: $table-border;
    }

    .c-data-table__container--no-border {
        border: none;
    }

    .c-data-table__sizer-body {
        display: table-row-group;
        visibility: hidden;
        tr, td {
            border: 0;
            padding: 0;
        }
    }
    .c-data-table__row {
        border-left: none;
        border-right: none;

        &:first-child {
            border-top: none;
        }
        &:last-child {
            border-bottom: none;
        }
    }

    // bordered variant of the table. selectors have to be this specific so that nested tables don't get selected by the class
    .c-data-table--bordered > .c-data-table__header > .c-data-table__row,
    .c-data-table--bordered > .c-data-table__body > .c-data-table__row {

        // vertical borders for all table cells
        > .c-data-table__block {
            border-left: 1px dashed $color-gray--020;
            border-right: 1px dashed $color-gray--020;

            &:first-child {
                border-left: none;
            }
            &:last-child {
                border-right: none;
            }
        }

        &.c-data-table__summary > .c-data-table__block {
            border-left: none;
        }

        // except for cells that contain radio/checkbox/drag-handle/collapse icon
        > .c-data-table__block--action {
            border-left: none;
            border-right: none;
            + .c-data-table__block {
                border-left: none;
            }
        }

        > .c-data-table__block--header {
            border-left-style: solid;
            border-right-style: solid;
        }

        // add a bottom border to the collapsible row when it's expanded
        &.c-data-table__row--has-collapse-content {
            border-bottom-width: 0;
            transition: border-bottom-width .1s;
            transition-delay: .25s;

            &.c-data-table__row--collapse-expanded {
                border-bottom-width: 1px;
                transition: border-bottom-width 0s;
            }
        }
    }

    // cell level alignment modifiers
    .c-data-table__block--left {
        text-align: left;
    }
    .c-data-table__block--right {
        text-align: right;
    }
    .c-data-table__block--center {
        text-align: center;
    }

    .c-data-table__block--pinned {
        position: sticky;
        left: 0px;
        z-index: 1;
        background-color: $color-white;
        background-clip: padding-box;
        &:after {
            content: "";
            position: absolute;
            z-index: -1;
            right: -1px;
            top: 0;
            height: 100%;
            border-right: inherit;
        }


        &.c-data-table__block--header-action {
            z-index: 4; // absolute actions header has a z-index of 3, we want this to show up on top of it
        }
    }

    .c-data-table--collapsible-nested {
        // manage borders at row-level
        >.c-data-table__body, >.c-data-table__header {
            >.c-data-table__row {
                &:not(.c-data-table__collapsible-row) {
                    border-left: $table-border;
                    border-right: $table-border;
                }
                &:first-child {
                    border-top: $table-border;
                }
                &:last-child {
                    border-bottom: $table-border;
                }
            }
        }
    }

    // apply hover styles on rows that have checkboxes, radios or router-links
    .c-data-table__row--selectable {
        &:hover, &:focus, &:active {
            cursor: pointer;
            background-color: $color-brand--015 !important; // should take precedence in all cases
            border-color: $color-brand--040 !important;
            transition: background-color 120ms ease-in 90ms, border-color 120ms ease-in 90ms;
            z-index: 2;

            // pinned cells need to be targeted specifically as they have their own background color
            >.c-data-table__block--pinned {
                transition: inherit;
                background-color: $color-brand--015 !important; // should take precedence in all cases
            }
        }
    }

    .c-data-table__row--child {
        > .c-data-table__block--pinned {
            background-color: inherit;
        }
    }
}