/**
 * quinoa-vis-module timeline style definitions
 * ============
 * Please keep style definitions nested in order to ease
 * scss code reading accross files
 */
@import './../globals.scss';

// root selector of the component styles
.quinoa-timeline
{
    /*
     * Layout and layout-specific subcomponents styling
     */
    @extend .absolute-fill;

    display: flex;
    overflow: hidden;

    user-select: none;

    flex-flow: row nowrap;
    flex-wrap: nowrap;
    /*
     * Mini sub components
     */
    .mini-timeline
    {
        position: relative;

        flex: 1;
        .mini-timeline-container
        {
            @extend .absolute-fill;
        }
    }
    .main-timeline
    {
        position: relative;

        flex: 5;// todo: parametrize that
        .main-timeline-container
        {
            @extend .absolute-fill;
        }
        .timeline-captor
        {
            cursor: grab;

            fill-opacity: 0;
        }
    }
    .time-boundaries-container
    {
        @extend .absolute-fill;

        pointer-events: none;
        #to-date,
        #from-date
        {
            position: absolute;
            left: $gutter-medium * 8;// todo: parametrize that

            padding: $gutter-small;

            background: white;
        }
        #from-date
        {
            top: -$gutter-small;
        }
        #to-date
        {
            bottom: -$gutter-small;
        }
    }
    .labels-container
    {
        .label-group
        {
            cursor: pointer;
            .background-rect
            {
                @include transition(fill-opacity .2s ease);// todo : parametrize that

                fill-opacity: .8;// todo: parametrize that
            }
            &.hidden
            {
                .background-rect
                {
                    fill-opacity: 0;
                }
            }
            &.filtered-out
            {
                opacity: .1;// todo: parametrize that
            }
            &:hover,
            &.selected
            {
                rect,
                circle
                {
                    stroke: #000;// todo: parametrize that
                }
                .background-rect
                {
                    stroke: #000;// todo: parametrize that
                    fill-opacity: 1;
                }
            }
        }
    }
    .time-object-group
    {
        rect,
        circle
        {
            pointer-events: all;

            stroke: #fff;// todo: parametrize that
        }
        &.selected
        {
            rect,
            circle
            {
                stroke: #000;// todo: parametrize that
            }
        }
        &.hidden:not(.selected)
        {
            opacity: .1;
        }
    }
    .brush-container
    {
        .brush-captor
        {
            cursor: resize;
            pointer-events: all;

            fill-opacity: 0;
        }
        .brush-rect
        {
            pointer-events: none;
            rect
            {
                fill: rgba(0,0,0,.3);// todo: parametrize that
            }
        }
    }
    .ticks-container
    {
        .tick
        {
            line
            {
                stroke: rgba(0,0,0,.3);// todo: parametrize that
            }
        }
    }
    .object-detail-container
    {
        overflow-y: auto;

        max-width: 0;

        @include transition(all $time-medium ease);

        flex: 1;
        &.active
        {
            max-width: 60em;// todo: this is dirty
            padding: $gutter-medium;

            border-left: 1px solid #333;// todo: parametrize that
        }
        .header
        {
            h2
            {
                font-size: 1em;// todo: parametrize that
            }
        }
        .content
        {
            .source
            {
                font-size: .9em;// todo: parametrize that
            }
        }
    }
    .grabbing
    {
        g
        {
            pointer-events: none;
        }
    }
}