// Every application file should start with the common imports
@import 'common/setup';

// Application-specific components. Small, specific components from bootstrap (either
// sub-classed into Orchard-specific components or home-grown) should be
// imported here.
@import 'components/dropdown';

// INDEX PAGE

// Intro
#analytics-more-text-toggle {
    @include text-link;
    + #analytics-more-text {
      display:none;
    }
}

// Top Downloads Charts
.analytics-table-row {
    td {
        &:first-of-type {
            border-right-width:0;
        }
        &:nth-of-type(2) {
            border-left-width:0;
            padding-left:0;
        }
    }

    #album-artwork {
        display:table-cell;
        height:30px;
        overflow:hidden;
        vertical-align:middle;
    }

    #more-text {
        background:url(../images/icons/detailArrow.png) no-repeat right center;
        display:none;
        font-size:11px;
        font-weight:500;
        height:22px;
        padding-right:26px;
        vertical-align:middle;
    }

    &:hover {

        cursor:pointer;

        #album-info {
            small {
                color:#fff;
            }
        }

        #more-text {
            display:table-cell;
        }

        #row-total {
            display:none;
        }

    }

    #total-number {
        width:50px !important;
    }

    #row-total {
        display:table-cell;
        height:22px;
        text-align:right;
        vertical-align:middle;
        width:50px;
    }

}

#album-artwork {
    img {
        width:30px !important;
    }
}

#album-info {

    .h5,small {
        display:block;
        margin:0;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        width:148px;
    }
    small {
        color:$gray-darker;
    }
}

.axis path, .axis line {
    fill: none;
    stroke:#b9b9b9;
    shape-rendering: crispEdges;
}

.axis line {
    stroke:white;
    stroke-width:0.5;
}

.striping line {
    stroke:#c9c9c9;
    stroke-width:0.5;
}

path.domain {
    stroke-width:0.5;
}

g.x.axis {
    g.tick {
        text {
            @include transform(translateY(2px));
        }
    }
}

g.x.axis {
    g.striping {
        g.tick {
            text {
                @include transform(translateY(10px));
            }
        }
    }
}

g.x.axis {
    g.striping {
        g.tick:first-of-type {
            text {
                @include transform(translateX(-9999px));
            }
        }
    }
}

.area {
    fill:rgba(16,116,190,0.2);
}

rect.overlay.background {
    fill: url(#gradient);
}
.stop1, .stop2, .stop5, .stop6 {
    stop-color:#f9f9f9;
}
.stop3, .stop4, .stop7, .stop8 {
    stop-color: #f4f4f4;
}

.y.axis > .tick text {
    transform:translateY(-10px);
}

.overlay {
    fill:none;
    pointer-events: all;
}
.dot {
    fill:$blue-medium;
}

.btn-default.hasDatepicker {
	@extend .small;
	@extend .text-left;

	@include background(url(/img/calendar_grey.svg) no-repeat 73px 5px,linear-gradient(to bottom, white, rgba(255, 255, 255, 0)));

    background-color:#eee;
    max-width:102px;
	padding:6px 20px 5px 8px;
	position:relative;
	text-transform:uppercase;

    &:hover {
        @include background(url(/img/calendar.svg) no-repeat 64px -4px,linear-gradient(to bottom, white, rgba(255, 255, 255, 0)));
    }
}

div[id*="graph_"] {
    position:relative;
    height:149px;

    &.graph {
        margin-bottom:20px;
    }

    .well {
        background:#fff;
        border-color:#b9b9b9;
        box-shadow:inset 0 0 3px rgba(0,0,0,0.18);
        margin-bottom:0;
        max-height:151px;
        padding:0;

        > div.pull-left {
            height:149px;
            padding:5px 7px;
            position:relative;
            width:168px;

            h4:first-of-type {
                border-bottom:1px solid $gray-light;
                margin-bottom:4px;
                max-height:34px;
                overflow:hidden;
                padding-bottom:2px;
            }
        }

        > div.pull-right {
            background:#e4e4e4;
            border-left:1px solid #b9b9b9;
            border-radius:0 4px 4px 0;
        }
    }

    table {
        background:transparent;
    }

}

#graphs_list {
    @extend .col-md-12;
}

.drag-handle {

    cursor:hand;
    margin-top:-6px;
    left:-13px;
    position:absolute;
    top:50%;

}

.active-date {
    @extend .small;

    color:$gray;
    font-size:9px;

    text-transform:uppercase;
}

table.graph-totals {

    background-color:transparent;

    tr {
        td {
            p.lead,p {
                margin-bottom:0;
                padding-right:6px;
            }
        }

        td:first-of-type {
            white-space:nowrap;
            width:1px;
        }

        td:last-of-type {
            border-bottom:1px solid $blue-medium;
            color:$blue-medium;
        }
    }
}

.drag-handle {
    > .bar {
        background:#afadaf;
        box-shadow:inset 0 1px 0 rgba(0,0,0,0.5);
        display:block;
        height:3px;
        margin-bottom:3px;
        width:11px;
    }
}

.arrow.top-center:before,.arrow.top-center:after {
    content: "";
    position: absolute;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    top:0;
    left: 50%;
    margin-left: -10px;
}

.arrow.top-center:before {
    border-bottom: 10px solid #efefef;
    margin-top: -9px;
    z-index: 1;
}

.arrow.top-center:after {
    border-bottom: 10px solid #808080;
    top:-10px;
}

.arrow.top-right {
    margin-top:10px;
}

.arrow.top-right:before,.arrow.top-right:after {
    content: "";
    position: absolute;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    top:0;
    left:100%;
    margin-left:-23px;
}

.arrow.top-right:before {
    border-bottom: 10px solid #efefef;
    margin-top: -9px;
    z-index: 1;
}

.arrow.top-right:after {
    border-bottom: 10px solid #808080;
    top:-10px;
}

#graphs {
    .popover {
        @extend .arrow.top-center;
        width:190px;

        input,select {
            font-size:11px;
        }
    }
}

#btn-share {
    @include vertical-align;
}

.detail-dropdown {

    position:relative;

}

#filter-by {

    div[id*="_ids_wrap"] {
        margin-right:12px;
    }

}

// SHARE URL BUTTON
#shareUrlDiv {
    float:right;
    margin-top:8px;
    position:relative;

    .popover {
        @extend .arrow.top-right;

        left:auto;
        right:0;
        top:25px;
        width:250px;
    }
}

// CARDS
#dim_wrap {

    background-color:$blue-deep;
    box-shadow:inset 0 0 20px rgba(0,0,0,0.5);
    border:none;
    border-radius:$panel-border-radius;
    padding:10px;

    > div[id*="_wrap"] {

        @extend .clearfix;

        &:not([id*="release_ids_wrap"]) {

            .btn.dropdown__toggle {

                > img {
                    @extend .hidden;
                }

            }

        }

        .dropdown {
            margin-right:1.25%;

            &:nth-of-type(6) {
                display:none;
            }

            &:last-of-type,
            &:nth-of-type(5) {
                margin-right:0;
            }

            .card {
                width:100%;

                &.empty {

                    > .btn {

                        cursor:default;

                    }

                }

                p.small {
                    color:$gray;
                    font-style:italic;
                    margin:0;
                }

                .btn.dropdown__toggle {
                    appearance:normal;
                    -moz-appearance:normal;
                    -webkit-appearance:normal;
                    border-radius:$panel-border-radius;
                    height:100px;
                    padding:6px 9px;
                    vertical-align:top;
                    width:100%;

                    h3,h4 {
                        margin-top:0;
                    }

                    h3 {
                        display:inline-block;

                        .plus-sign {
                            @extend .pull-right;

                            background:#f3f3f3;
                            border:1px solid rgba(255,255,255,0.5);
                            border-radius:100%;
                            -webkit-border-radius:100%;
                            box-shadow:inset 0 0 3px rgba(0,0,0,0.2),0 2px 3px rgba(0,0,0,0.2);
                            font-size:14px;
                            height:21px;
                            line-height:16px;
                            margin:2px 0 0 12px;
                            text-align:center;
                            width:21px;
                        }

                    }

                }

                .btn {
                    background:rgba(255,255,255,0.05);
                    border:1px dashed #717171;
                    box-shadow:inset 0 0 6px rgba(0,0,0,0.3);

                    h3 {
                        color:#808080;
                    }

                    &:hover {
                        background:#fff;
                        border:1px solid #a1a1a1;
                        box-shadow:none;
                        color:inherit;
                    }

                }

                .dropdown__body {

                    > div {
                        padding:0 14px;
                    }

                    input.dropdown__item-checkbox {
                        display:none;
                    }

                }

                > .card-close {
                    background:#f3f3f3;
                    border:1px solid rgba(255,255,255,0.75);
                    border-radius:50%;
                    box-shadow:0 1px 6px rgba(0,0,0,0.3);
                    color:$gray;
                    cursor:pointer;
                    font-size:14px;
                    font-weight:800;
                    height:18px;
                    line-height:14px;
                    position:absolute;
                    right:-6px;
                    text-align:center;
                    top:-6px;
                    width:18px;
                    z-index:3;
                }

            }

        }

    }

}

#dim_wrap > div[id*="_wrap"] .dropdown.dropdown--opened {

    .btn.dropdown__toggle {
        background:#fff;
        border:1px solid #a1a1a1;
        border-bottom:none;
        border-radius:$panel-border-radius $panel-border-radius 0 0;
        box-shadow:none;
        color:inherit;
        position:relative;
        z-index:501;

        &:hover {
            border-bottom:none;
        }
    }

}

#dim_wrap.well-blue > div[id*="_wrap"] .dropdown .card.card-selected .btn {
    background-color:#fff;
    border:none;
    box-shadow:none;
    color:inherit;
}

#dim_wrap.well-blue > div[id*="_wrap"].card-1 .dropdown,
#dim_wrap.well-blue > div[id*="_wrap"].card-2 .dropdown {
    width:49.375%;
}

#dim_wrap.well-blue > div[id*="_wrap"].card-3 .dropdown {
    width:32.5%;
}

#dim_wrap.well-blue > div[id*="_wrap"].card-4 .dropdown {
    width:24.0625%;
}


#dim_wrap.well-blue > div[id*="_wrap"].card-5 .dropdown,
#dim_wrap.well-blue > div[id*="_wrap"].card-6 .dropdown {
    width:19%;
}

#dim_wrap.well-blue > div[id*="_wrap"].card-1 .card .btn img,
#dim_wrap.well-blue > div[id*="_wrap"].card-2 .card .btn img,
#dim_wrap.well-blue > div[id*="_wrap"].card-3 .card .btn img,
#dim_wrap.well-blue > div[id*="_wrap"].card-4 .card .btn img,
#dim_wrap.well-blue > div[id*="_wrap"].card-5 .card .btn img,
#dim_wrap.well-blue > div[id*="_wrap"].card-6 .card .btn img {
    @extend .pull-left;
    height:auto;
    margin-right:3.0725%;
}

#dim_wrap.well-blue > div[id*="_wrap"][class*="card-"] .card .btn h4 {
    font-size:21px;
    margin-bottom:6px;
    max-height:34px;
    overflow:hidden;
    white-space:normal;
    width:100%;
}

#dim_wrap.well-blue > div[id*="_wrap"].card-1 .card .btn img,
#dim_wrap.well-blue > div[id*="_wrap"].card-2 .card .btn img {
    max-width:20%;
}

#dim_wrap.well-blue > div[id*="_wrap"].card-1 .card .btn > .text-left,
#dim_wrap.well-blue > div[id*="_wrap"].card-2 .card .btn > .text-left {
    @extend .pull-left;

    width:76.9275%;
}

#dim_wrap.well-blue > div[id*="_wrap"].card-1 .card .btn h4,
#dim_wrap.well-blue > div[id*="_wrap"].card-2 .card .btn h4 {
    max-height:46px;
    min-height:25px;
}

#dim_wrap.well-blue > div[id*="_wrap"].card-3 .card .btn img {
    max-width:34%;
}

#dim_wrap.well-blue > div[id*="_wrap"].card-3 .card .btn > .text-left {
    @extend .pull-left;

    width:62.9275%;
}

#dim_wrap.well-blue > div[id*="_wrap"].card-3 .card .btn h4,
#dim_wrap.well-blue > div[id*="_wrap"].card-4 .card .btn h4 {
    font-size:15px;
}

#breakdown #dim_wrap.well-blue > div[id*="_wrap"].card-4 .card .btn img {
    @extend .pull-right;

    border-radius:50%;
    bottom:6px;
    margin-left:3.0725%;
    margin-right:0;
    max-width:29.75%;
    position:absolute;
    right:9px;
}

#dim_wrap.well-blue > div[id*="_wrap"].card-4 .card .btn > .text-left {
    @extend .pull-left;

    width:74.178%;
}

#breakdown #dim_wrap.well-blue > div[id*="_wrap"].card-5 .card .btn h3,
#breakdown #dim_wrap.well-blue > div[id*="_wrap"].card-6 .card .btn h3 {
    font-size:16px;
    line-height:22px;
}

#breakdown #dim_wrap.well-blue > div[id*="_wrap"].card-5 .card .btn img,
#breakdown #dim_wrap.well-blue > div[id*="_wrap"].card-6 .card .btn img {
    @extend .pull-right;

    border-radius:50%;
    bottom:6px;
    margin-left:3.0725%;
    margin-right:0;
    max-width:31.5%;
    position:absolute;
    right:9px;
}

#dim_wrap.well-blue > div[id*="_wrap"].card-5 .card .btn > .text-left,
#dim_wrap.well-blue > div[id*="_wrap"].card-6 .card .btn > .text-left {
    @extend .pull-left;

    width:96%;
}

#dim_wrap.well-blue > div[id*="_wrap"].card-5 .card .btn h4,
#dim_wrap.well-blue > div[id*="_wrap"].card-6 .card .btn h4 {
    font-size:14px;
    max-height:32px;
}

#dim_wrap.well-blue > div[id*="_wrap"].card-5 .card .btn p.small,
#dim_wrap.well-blue > div[id*="_wrap"].card-6 .card .btn p.small {
    width:60%;
}

#ui-datepicker-div {
    z-index:101 !important;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {

    .axis line {
        stroke-width:1;
    }

    .striping line {
        stroke-width:1;
    }

    path.domain {
        stroke-width:1;
    }

}


#data-sources-link {
    padding-right:36px;
    position:relative;

    &:after {
        @include transition (background 0.15s linear);
        background:$blue-deep;
        border-radius:100%;
        color:#fff;
        content:"i";
        font-family:'Times New Roman',serif;
        font-size:14px;
        font-style:italic;
        height:17px;
        right:11px;
        line-height:17px;
        position:absolute;
        text-align:center;
        text-transform:lowercase;
        top:3px;
        width:17px;
    }
    &:hover {
        &:after {
            background:$blue-medium;
        }
    }

}

#analytics-disclaimer {

    color:$gray;

    b {
        @extend .small;

        color:$orange-create;
    }
}

table#bars {

    border-top:1px solid $gray-light;

    tr {
        td:nth-of-type(3) {
            border-right:none;
        }
        td:nth-of-type(4) {
            border-left:none;
        }
    }

    .breakdown-title {

        > div {
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
            width:252px;
        }

    }

    .percentage-bar {
        background:$gray-light;
        height:20px;

        &.breakdown-0 {
            background:#a513b2;
        }

        &.breakdown-1 {
            background:$green-update;
        }

        &.breakdown-2 {
            background:$orange-create;
        }

        &.breakdown-3 {
            background:$red-destroy;
        }

    }

}

h3.grand-total {
    margin:0 0 4px;
}

.hide-channel-toggle {
    bottom:4px;
    cursor:pointer;
    position:absolute;
    text-decoration:underline;
}

.active-date,.active-total {
    margin:0;
}

#barchart {

    .row {

        h4 {

            line-height:24px;
            margin:0;

             + .btn-multiselect {
            margin-left:12px;
            }

        }

    }

}

#filter-by {
    .col-md-10 {
        @extend .clearfix;
    }
}

svg.chart {
    > g {
        font-size:9px;
    }

    .focus {
        circle {
            fill:rgba(255,255,255,0.8);
        }
    }

    .line {
        stroke:$blue-medium;
        stroke-width:1px;
        fill:none;

        &.breakdown-0 {
            stroke:#a513b2;

            circle.dot {
                fill:#a513b2;
            }
        }

        &.breakdown-1 {
            stroke:$green-update;

            circle.dot {
                fill:$green-update;
            }
        }

        &.breakdown-2 {
            stroke:$orange-create;

            circle.dot {
                fill:$orange-create;
            }
        }

        &.breakdown-3 {
            stroke:$red-destroy;

            circle.dot {
                fill:$red-destroy;
            }
        }

    }

}

.active-total {

    .graph-point-sales {
        font-size:14px;
        text-align:right;
    }

    .graph-point-name {
        font-size:11px;

        > div:first-of-type {
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
            max-width:116px;
        }

    }

    .graph-point-line {
        height:1px;
        margin-bottom:5px;
    }

    .breakdown-0 {
        color:#a513b2;

        .graph-point-line {
            background:#a513b2;
        }

    }

    .breakdown-1 {
        color:$green-update;

        .graph-point-line {
            background:$green-update;
        }

    }

    .breakdown-2 {
        color:$orange-create;

        .graph-point-line {
            background:$orange-create;
        }

    }

    .breakdown-3 {
        color:$red-destroy;

        .graph-point-line {
            background:$red-destroy;
        }

    }

}