@import '../variables';

/**************************************
 * Tables
 **************************************/

.tbl th,
.tbl td {
    padding: 10px 8px;
}

.tbl tr {
    background: $bdl-gray-05;
}

.tbl th {
    color: $bdl-gray;
    font-weight: bold;
    background: $bdl-gray-10;
}

.tbl td {
    border-top: 1px solid $bdl-gray-10; /* Horizontal border - Also helps with browsers lacking nth-child support */
}

/*
 * Rounded corners are applied this way because border-radius on the table element
 * doesn't prevent inner table elements from peeking out
 */
.tbl-rounded th:first-child {
    border-top-left-radius: 5px;
}

.tbl-rounded th:last-child {
    border-top-right-radius: 5px;
}

.tbl-rounded tr:last-child td:first-child {
    border-bottom-left-radius: 5px;
}

.tbl-rounded tr:last-child td:last-child {
    border-bottom-right-radius: 5px;
}

/* box-ui-elements styles.  TODO: MERGE THIS */
.table {
    width: 100%;
    font-size: inherit;

    // Compact table overrides
    &.is-compact .table-body {
        .table-row {
            height: 32px; // Extra 2px for border box
        }

        .table-cell {
            padding: 5px 10px;
        }
    }

    &.is-selectable {
        cursor: default;
        user-select: none;
    }
}

.table.is-scrolling .table-header {
    box-shadow: 0 4px 6px -2px fade-out($black, .96);
}

.table-row {
    position: relative;
    display: flex;
    height: 52px; // Extra 2px for border box

    .table-header & {
        height: 40px;
        border-bottom: 1px solid $bdl-gray-10;
    }
}

.table-cell {
    display: flex;
    flex: 1;
    align-content: center;
    align-items: center;
    min-width: 0; // Tells flexbox to respect overflow
    padding: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    &.is-fixed-width {
        flex: none;
    }
}

.table-body .table-row {
    border-top: 1px solid $bdl-gray-10;

    .table.has-hover-styles &:not(.is-selected):hover,
    .table.has-hover-styles &:not(.is-selected).hover-styles {
        color: darken($primary-color, 25%);
        background-color: $hover-blue-background;
        border-top: 1px solid $hover-blue-border;

        & + .table-row:not(.is-selected) {
            border-top: 1px solid $hover-blue-border;
        }

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

        &:last-child {
            border-bottom: 1px solid $hover-blue-border;
        }
    }

    .table &.is-selected {
        color: darken($primary-color, 25%);
        background-color: $selected-blue-background;
        border-top: 1px solid $selected-blue-border;

        a {
            color: inherit;
        }

        & + .table-row,
        & + .table-row:hover {
            border-top: 1px solid $selected-blue-border;
        }

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

        &:last-child {
            border-bottom: 1px solid $selected-blue-border;
        }
    }

    &:focus,
    &.is-focused {
        outline: none;

        &::before {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 2px;
            background-color: $bdl-gray-30;
            content: ' ';
        }
    }

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

    &:last-child {
        border-bottom: 1px solid $bdl-gray-10;
    }
}

// Filter and sortable header styles
.table-filterable-header,
.table-sortable-header {
    width: 100%;
    height: 100%;
    padding: 0;
    text-align: left;
    background: transparent;
    border: 0;
    cursor: pointer;
    appearance: none;

    &:focus {
        outline: none;
    }
}

.sortable-header-arrow {
    margin: 0 3px;

    svg {
        path {
            transform: rotate(0deg);
            transform-origin: 50% 50%;
            transition: transform $bdl-transitionDurationBase;
        }
    }
}

.desc {
    .sortable-header-arrow {
        svg {
            path {
                transform: rotate(180deg);
                transform-origin: 50% 50%;
            }
        }
    }
}

.table-filterable-header + .overlay-wrapper {
    position: inherit;
}

// Waypoint loader
.table-waypoint {
    text-align: center;
    outline: 0;
    cursor: default;

    .crawler {
        margin: 20px auto;
    }
}

.tbl-striped tr:nth-of-type(odd) {
    /* IE9+ only */
    background: $bdl-gray-10;
}

.table.is-compact {
    .table-body {
        .table-row {
            border-color: transparent;

            &:nth-child(odd) {
                background-color: $bdl-gray-05;
            }

            &.is-selected {
                background-color: fade-out($primary-color, .9);
            }
        }
    }
}