+$sortcols: name, date, size;
+@each $col in $sortcols {
+ #filelist-#{$col}-sort {
+ &:checked {
+ & ~ table.filelist {
+ /* Update table header state */
+ th.#{$col} {
+ label~label {
+ display: -moz-inline-box !important;
+ display: inline-block !important;
+ }
+ label { display: none; }
+ }
+
+ /* Show only appropriate items from the sort body (forward) */
+ tbody+tbody>tr.#{$col} { display: table-row; }
+ tbody+tbody>tr { display: none; }
+ }
+
+ & ~ #filelist-#{$col}-rev:checked ~ table.filelist {
+ /* Show only appropriate items from sort body (reversed) */
+ tbody+tbody>tr.#{$col}rev { display: table-row; }
+ tbody+tbody>tr { display: none; }
+ }
+
+ /* Unhide associated checkbox for keyboard navigation */
+ & ~ #filelist-#{$col}-rev { display: block !important; }
+ }
+
+ &:focus ~ table.filelist th>label~label>span {
+ border: 1px dotted;
+ padding: 0;
+ }
+
+ display: block !important;
+ position: absolute;
+ z-index: -1;
+ opacity: 0;
+ }
+
+ #filelist-#{$col}-rev {
+ &:checked ~ table.filelist {
+ /* Update table header state */
+ th.#{$col} {
+ img+img {
+ display: -moz-inline-box !important;
+ display: inline !important;
+ }
+ img { display: none; }
+ }
+ }
+
+ &:focus ~ table.filelist th>label~label>img {
+ border: 1px dotted;
+ padding: 0;
+ }
+
+ position: absolute;
+ z-index: -2;
+ opacity: 0;
+ }
+}
+
+/* Enable the sorted tables only when non-default option is selected */
+#filelist-name-rev, #filelist-date-sort, #filelist-size-sort {
+ &:checked~table.filelist>tbody {
+ &+tbody { display: table-row-group !important; }
+ display: none;
+ }
+}
+