@import "shared/mixins-and-vars";

.deque-table-sortable__group {
    caption {
        margin-bottom: 15px;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
        overflow: visible;
        margin-top: 8px;
        width: initial%;

        thead {
            border-bottom: 1px solid #e3e3e3;

            th {
                position: relative;
                text-align: center;
            }

            th:last-child {
                border-right: none;
            }
            th .sortableColumnLabel {
                display: inline-block;
                height: 100%;
                cursor: pointer;
                padding: 0 0 0 (25 / @px);
                text-align: left;
            }
            th .sortableColumnLabel:hover {
                outline: 1px dashed #767676;
            }
            th button {
                color: white;
                background: transparent;
                border: 0;
                padding-left: 0;
                font-size: inherit;
                font-weight: inherit;

                .enable__is-dark-mode & {
                    color: @dark-mode-black;
                }
            }

            th button {
                margin: -25px 0;
                padding: 25px 0;
            }

            th button:hover {
                margin: 0;
            }
            th button:focus {
                margin: 0;
                z-index: 1;
            }
            th button:active {
                color: #000000;
                outline: 1px solid transparent;
                margin: 0;
            }
            th[colspan]:not([colspan="1"]) {
                text-align: center;
            }
            th .sortableColumnLabel:after {
                /* This is the up and down arrow SVG. */
                content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg version='1.1' viewBox='0 0 41 57' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle /%3E%3Cdesc /%3E%3Cdefs /%3E%3Cg fill='none' fill-rule='evenodd' id='Icons' stroke='none' stroke-width='1'%3E%3Cg fill='%23fff' stroke='%23000' id='XXX-Artboard-1' transform='translate(-1239.000000, -138.000000)'%3E%3Cg id='Double-Arrows' transform='translate(1239.000000, 138.150000)'%3E%3Cpath d='M10.5623119,31.5480425 C9.30468998,32.6283056 8.28518598,32.1695935 8.28518598,30.5136396 L8.28518598,-6.51787882 C8.28518598,-8.16942688 9.29767763,-8.63856827 10.5623119,-7.55228175 L31.0451159,10.041891 C32.3027378,11.1221541 32.3097502,12.8675832 31.0451159,13.9538698 L10.5623119,31.5480425 Z' id='Triangle-1' transform='translate(20.138075, 11.997111) rotate(-90.000000) translate(-20.138075, -11.997111) ' /%3E%3Cpath d='M10.5623119,63.8182709 C9.30468998,64.898534 8.28518598,64.4398218 8.28518598,62.7838679 L8.28518598,25.7523495 C8.28518598,24.1008014 9.29767763,23.6316601 10.5623119,24.7179466 L31.0451159,42.3121194 C32.3027378,43.3923825 32.3097502,45.1378116 31.0451159,46.2240981 L10.5623119,63.8182709 Z' id='Triangle-1' transform='translate(20.138075, 44.267339) scale(1, -1) rotate(-90.000000) translate(-20.138075, -44.267339) ' /%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

                // the aspect ratio is the width and height of the original image.
                @aspectRatio: (41/57);
                @height: (17 / @px);
                @width: (@height * @aspectRatio);

                height: @height;
                width: @width;

                position: relative;
                display: inline-block;
                left: 6px;
                top: (4/@px);

                filter: invert(90%);
            }
            th[aria-sort] .sortableColumnLabel:after {
                /* This is the down arrow SVG. */
                content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg version='1.1' viewBox='0 0 41 57' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle /%3E%3Cdesc /%3E%3Cdefs /%3E%3Cg fill='none' fill-rule='evenodd' id='Icons' stroke='none' stroke-width='1'%3E%3Cg fill='%23fff' stroke='%23000' id='XXX-Artboard-1' transform='translate(-1239.000000, -138.000000)'%3E%3Cg id='Double-Arrows' transform='translate(1239.000000, 138.150000)'%3E%3Cpath d='M10.5623119,63.8182709 C9.30468998,64.898534 8.28518598,64.4398218 8.28518598,62.7838679 L8.28518598,25.7523495 C8.28518598,24.1008014 9.29767763,23.6316601 10.5623119,24.7179466 L31.0451159,42.3121194 C32.3027378,43.3923825 32.3097502,45.1378116 31.0451159,46.2240981 L10.5623119,63.8182709 Z' id='Triangle-1' transform='translate(20.138075, 44.267339) scale(1, -1) rotate(-90.000000) translate(-20.138075, -44.267339) ' /%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            }

            th[aria-sort="descending"] .sortableColumnLabel:after {
                transform: scaleY(-1) translateY((-5 / @px));
            }

            &:before {
                content: "";
                display: block;
                width: 7px;
            }
            td,
            th {
                padding: 12px 11px 12px 0;
                text-align: center;
                vertical-align: middle;
            }
        }

        tbody {
            th {
                text-align: center;
            }
            td th {
                text-align: left;
                padding: 7px;
                border-right: 1px solid #cccccc;
            }
            td:last-child,
            th:last-child {
                border-right: none;
            }
        }
    }
}