@import "lanes/screens/styles";

.time-tracking {
    position: relative;

    .edit-control {

        .mini-controls {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            .l {
                display: flex;
                flex-direction: column;
                align-items: flex-end;
            }
        }
        &.left {
            .mini-controls {
                flex-direction: row-reverse;
            }
        }
    }

    .calendar-header {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        flex-wrap: wrap;
        align-items: center;
        .display label+label {
            padding-left: 1rem;
        }
        .paging {
            display: flex;
            flex-direction: row;
            align-items: center;
            .legend{
                font-size: 1.4rem;
                margin-right: 1rem;
            }
            i {
                margin: 0 0.5em;
            }
        }
        .select {
            width: 200px;
            @include lanes-unpadded-dropdown();
        }
    }

    .calendar-panel {
        margin: 5px 20px 20px 20px;
        @include flexbox();
        @include flex-grow(1);
        @include flex-direction(column);
    }

    .monthly-totals {
        align-self: flex-end;
        display: inline;
        width: 52px;
        position: relative;
        top: 18px;

        text-align: right;
        border-top-right-radius: 8px;
        border: 1px solid lightgrey;
        border-top-left-radius: 8px;
        border-bottom: 0;
        padding-right: 3px;

    }

    @each $current-color in $lanes-color-selections {
        $i: index($lanes-color-selections, $current-color);
        .calendar-header .select .color-#{$i} {
            background: $current-color;
            color: nth($lanes-text-color-selections, $i);
        }
        .day.summary .color-#{$i} {
            background: $current-color;
            color: nth($lanes-text-color-selections, $i);
        }
    }

    .dayz {
        flex: 1;
        &.month {
            .x-labels {
                width: 94.5%;
                .day-label {
                    width: (100%/7);
                }
            }
            .days {
                .day {
                    width: 13.5%;
                }
                .summary {
                    width: 5.5%;
                    flex-direction: column;
                    display: flex;
                    justify-content: center;
                    text-align: right;
                }
            }
        }
    }

    .popover {
        .controls {
            border-top: 2px solid lightgrey;
            padding-top: 1rem;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            button { width: 6rem; }
        }
    }

    .dayz .label {
        font-size: 1rem;
        color: darkgrey;
    }
}