/*
 * Responsive Tables
 */
@media @mobile {

    table.responsive {
        margin-bottom: 0;

        td , th {
            position: relative;
            white-space: nowrap;
            overflow: hidden;
        }

        th:first-child, td:first-child {
            display: none;
        }
    }

    .pinned {
        position: absolute;
        left: 0;
        top: 0;
        background: #fff;
        width: 35%;
        overflow: hidden;
        overflow-x: scroll;
        border-right: 1px solid @border_color;
        border-left: 1px solid @border_color;

        table {
            border-right: none;
            border-left: none;
            width: 100%;
            margin: 0;

            th, td {
                white-space: nowrap;
            }

            &:last-child {
                border-bottom: 0;
            }
        }
    }

    .tableWrapper {
        position: relative;
        margin-bottom: 20px;
        overflow: hidden;
        border-right: 1px solid #ccc;

        table {
            table-layout: auto !important;
        }

        div.scrollable {
            margin-left: 35%;
            overflow: scroll;
            overflow-y: hidden;
        }
    }
}

.responsiveTable {
    border: 0;
    margin: 0 0 20px;

    @media @desktop, @tablet {
        display: table;
        table-layout: fixed;
        border-collapse: collapse;
        width: 100%;
    }

    .headerRow, .dataRow {
        border-bottom: 1px solid @border_color;

        a {
            text-decoration: none;
            color: @text_color;
            display: block;

            @media @mobile {
                color: #fff;
                padding: 15px 30px;
            }
        }

        @media @desktop, @tablet {
            display: table-row;

            &:hover {
                background: @light_color;
            }
        }

        div {
            padding: 15px;
            .clearfix;

            @media @desktop, @tablet {
                display: table-cell;

                &:first-child {
                    width: 30%;
                }
            }

            @media @mobile {
                border-bottom: 1px solid @border_color;
                position: relative;
                padding: 5px 20px;

                &:first-child {
                    background: @primary_color;
                    color: #fff;

                    &:after {
                        .fa(f105);
                        display: block;
                        position: absolute;
                        top: 50%;
                        right: 20px;
                        transform: translateY(-50%);
                        .rems(22);
                        color: #fff;
                        cursor: pointer;
                    }
                }

                &:not(:first-child) {

                    &:before {
                        content: attr(data-header);
                        display: block;
                        float: left;
                        width: 45%;
                        font-weight: bold;
                    }

                    span {
                        float: left;
                        width: 50%;
                    }
                }

                &:last-child {
                    border-bottom: 0;
                }
            }
        }
    }

    .headerRow {

        @media @mobile {
            display: none;
        }

        div {
            background: @primary_color;
            color: #fff;
        }
    }
}