/* ==========================================================================
   Capital Framework
   Table Styling
   ========================================================================== */

//
// Theme variables
//

// Color variables

@table-cell-bg:              @white;
@table-cell-bg_alt:          @gray-5;
@table-row-link-bg-hover:    @pacific-80;
@table-row-link-hover-color: @white;
@table-scrolling-border:     @gray-40;
@table-border:               @gray;

//
// Import external dependencies
//

@import (reference) '../../cf-core/src/cf-core.less';
@import (reference) '../../cf-icons/src/cf-icons.less';

// Mixins
.striped-table() {
    & > tbody > tr:nth-child(even) {
        & > th,
        & > td {
            background: @table-cell-bg_alt;
        }
    }
}

.o-table_cell__right-align {
    text-align: right;
}

.o-table__row-links {
    .respond-to-min( @bp-med-min, {
        tr:hover {
            td {
                background: @table-row-link-bg-hover;
                color: @table-row-link-hover-color;
                cursor: pointer;
            }
            a {
                color: @table-row-link-hover-color;
            }
        }
    } );
}

.o-table-wrapper__scrolling {
    box-sizing: border-box;
    overflow-y: hidden;
    table {
        border: 1px solid @table-scrolling-border;
        .striped-table();
    }
}

.o-table__sortable {
    button.sortable {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        border: none;
        background: none;
        font-family: inherit;
        font-weight: inherit;
        line-height: inherit;
        outline: none;
        text-align: left;
        text-transform: inherit;

        &:after {
            display: inline-block;
            position: relative;
            vertical-align: bottom;
            content: '';
            visibility: hidden;
            .u-svg-inline-bg( 'down' );
            background-size: auto @cf-icon-height;
            background-repeat: no-repeat;
            background-position: center center;
            height: @cf-icon-height;
            width: 1em;
        }
    }

    .sortable:hover:after,
    .sortable.sorted-up:after,
    .sortable.sorted-down:after {
        visibility: visible;
    }

    .sortable.sorted-down:after,
    .sortable.sorted-up:hover:after {
        top: 1px;
        transform: rotate( 180deg );
    }

    .sortable.sorted-up:after,
    .sortable.sorted-down:hover:after {
        top: -1px;
        transform: rotate( 0deg );
    }
}

.respond-to-min( @bp-sm-min, {
    .o-table__striped {
        .striped-table();
    }
} );

.respond-to-max( @bp-xs-max, {
    .o-table {
        width: 100%;
    }

    .o-table__striped tr:nth-child(even) {
        & > th,
        & > td {
            background: @table-cell-bg;
        }
    }

    .o-table__stack-on-small {
        tr,
        td {
            display: block;
        }

        th,
        td {
            width: 100%;
        }

        & > thead {
            display: none
        }

        td[data-label]:before {
            .heading-5();
            display: block;
            margin-top: 0;
            margin-bottom: 0.41666667em;
            content: attr(data-label);
            line-height: 1.83333333;
        }

        td:last-child {
            margin-bottom: unit( 30px / @base-font-size-px, em );
        }
    }

    .o-table__entry-header-on-small {
        & > tbody td:first-child {
            padding-bottom: 0.75em;
            border-bottom: 1px solid @table-border;
            margin-bottom: unit( 10px / @base-font-size-px, em);
            margin-top: 0;
            background-color: @table-head-bg;
            font-size: 1.125em;
            font-weight: 400;
            line-height: 1.22222222;
        }

        & > tbody td:first-child:before {
            display: none;
        }

        & > tbody > tr {
            border-bottom: none;
            margin-bottom: unit( 30px / @base-font-size-px, em );
        }
    }
} );