@import '../functions.less';
@import '../../../../files/config/colors.less';


.drs-report-01 {
    * { .fx(); }
    position: relative;
    overflow: hidden;
    &.no-index {
        pointer-events: none;
    }
    .container {
        .title {
            font-size: 1.25em;
            text-align: center;
            margin-bottom: 10px;
        }
        .report {
            font-size: .8em;
            &[size="2"] {
                font-size: .9em;
            }
            &[size="3"] {
                font-size: 1em;
            }
            > * {
                .flex();
                align-items: stretch;
                flex-direction: row;
                width: 100%;
                *[fr="1"] { flex: 1; }
                *[fr="2"] { flex: 2; }
                *[fr="3"] { flex: 3; }
                *[fr="4"] { flex: 4; }
                *[fr="5"] { flex: 5; }
            }
            .header {
                background: linear-gradient(#7892, #7893);
                > * {
                    background: linear-gradient(#5551, #5552);
                    padding: 9px 10px;
                    font-weight: bold;
                    margin: 0 1px 1px 0;
                    cursor: pointer;
                    border-bottom: 1px solid #1238;
                    user-select: none;
                    &[ta="L"] { text-align: left; }
                    &[ta="C"] { text-align: center; }
                    &[ta="R"] { text-align: right; }
                    &:active {
                        color: #BDE;
                    }
                    &:not(.active):hover {
                        background: linear-gradient(#1231, #1233);
                    }
                    &.active {
                        background: linear-gradient(#1232, #1234);
                        color: #FFF;
                        &:hover {
                            background: linear-gradient(#1233, #1234);
                        }
                    }
                    &.sort, &.rsort {
                        &:after {
                            content: "";
                            position: absolute;
                            border-width: 7px 5px;
                            border-style: solid;
                            margin-left: 5px;
                        }
                    }
                    &.active.sort:after {
                        margin-top: -2px;
                        border-color: #0000 #0000 #FFF #0000;
                    }
                    &.active.rsort:after {
                        margin-top: 5px;
                        border-color: #FFF #0000 #0000 #0000;
                    }
                }
            }
            .total {
                > * {
                    .flex();
                    background: linear-gradient(#5001, #5002);
                    padding: 9px 10px;
                    border-top: 1px solid #1238;
                    &[ta="L"] { justify-content: left; }
                    &[ta="C"] { justify-content: center; }
                    &[ta="R"] { justify-content: right; }
                    strong {
                        padding-right: 5px;
                    }
                }
            }
            .item {
                &:nth-child(odd) > * {
                    background: #1231;
                    margin: 0 1px 0 0;
                }
                > * {
                    .flex();
                    padding: 7px 10px;
                    &[ta="L"] { justify-content: left; }
                    &[ta="C"] { justify-content: center; }
                    &[ta="R"] { justify-content: right; }
                }
                &:last-child > * {
                    border-bottom: 1px solid #1238;
                }
                &:hover {
                    color: #725;
                    a {
                        color: #D03;
                    }
                }
            }
            &.mobile {
                .grid(1fr 1fr; 1px);
                .header {
                    display: none;
                }
                .total {
                    width: 200%;
                     > *:empty {
                        display: none;
                    }
                    > *{
                        &:first-child {
                            padding-left: 30px; 
                        }
                        &:last-child {
                            text-align: right;
                            justify-content: right;
                            padding-right: 30px;
                        }
                    }
                }
                .item {
                    display: block;
                    padding: 5px;
                    border-radius: 4px;
                    > * {
                        text-align: left;
                        justify-content: left;
                        padding: 2px 5px;
                        background: none;
                        b {
                            padding-right: 5px;
                            display: inline-block;
                            width: 105px;
                            text-align: right;
                        }
                        &:first-child {
                            padding-top: 8px;
                        }
                        &:last-child {
                            padding-bottom: 8px;
                        }
                    }
                    &:nth-child(4n+2), &:nth-child(4n+3) {
                        background: #1231;
                    }
                    &:last-child > * {
                        border-bottom: none;
                    }
                }
                &.m2 {
                    .grid(1fr; 1px);
                    .total {
                        width: 100%;
                    }
                    .item {
                        &:nth-child(4n+2), 
                        &:nth-child(4n+3) {
                            background: none;
                        }
                        &:nth-child(2n + 2){
                            background: #1231;
                        }
                        &:nth-last-child(2){
                            border: none;
                        }
                        &:last-child {
                            border-bottom: 1px solid #1234;
                            box-shadow: 0 5px 5px -5px #333;
                        }
                    }
                }
            }
        }
    }
}