$colors: var(--dataviz-1) var(--dataviz-2) var(--dataviz-3) var(--dataviz-4);

@import "~highcharts/css/highcharts";

.highcharts-xaxis .highcharts-axis-line {
    stroke: var(--gray-400);
    stroke-width: 2px;
}

.highcharts-grid-line {
    stroke: var(--gray-200);
}

@mixin define-dataviz($index, $dataviz, $sub-1: 15%, $sub-2: 30%) {
    $dataviz-sub-1: lighten($dataviz, $sub-1);
    $dataviz-sub-2: lighten($dataviz, $sub-2);

    .bg-dataviz-#{$index} {
        background-color: $dataviz !important;
        fill: $dataviz !important;
    }
    .bg-dataviz-#{$index}-0 {
        background-color: $dataviz !important;
        fill: $dataviz !important;
    }
    .bg-dataviz-#{$index}-1 {
        background-color: $dataviz-sub-1 !important;
        fill: $dataviz-sub-1 !important;
    }
    .bg-dataviz-#{$index}-2 {
        background-color: $dataviz-sub-2 !important;
        fill: $dataviz-sub-2 !important;
    }

    .highcharts-color-#{$index} > .highcharts-point {
        fill: $dataviz !important;
        stroke: $dataviz !important;
    }

    .color-dataviz-#{$index} {
        color: $dataviz !important;
        stroke: $dataviz !important;
        fill: $dataviz !important;
    }

    .stroke-dataviz-#{$index} circle {
        stroke: $dataviz-sub-2 !important;
        stroke-width: 1px;
    }

    .chart-line-dash {
        stroke-dasharray: 10, 12;
    }

    .chart-no-line {
        stroke: none !important;
        opacity: 0.5;
    }
}

@include define-dataviz(0, $dataviz-1);
@include define-dataviz(1, $dataviz-2, 25%, 45%);
@include define-dataviz(2, $dataviz-3);
@include define-dataviz(3, $dataviz-4);
@include define-dataviz(4, $dataviz-5);
@include define-dataviz(5, $dataviz-6);
@include define-dataviz(6, $dataviz-7);
@include define-dataviz(7, $dataviz-8);
@include define-dataviz(8, $dataviz-9);
@include define-dataviz(9, $dataviz-10);
@include define-dataviz(10, $dataviz-11);

@mixin highcharts() {

    & > div,
    .highcharts-container {
        /* stylelint-disable declaration-no-important */
        overflow: visible !important;
        /* stylelint-enable */
    }

    .highcharts-axis-labels {
        fill: var(--gray-500);
    }

    .highcharts-xaxis-labels {
        opacity: 1;
        transition: opacity 150ms ease-in-out;
    }

    .highcharts-tooltip {
        border: none;
        filter: none;
        font-family: $font-family-sans-serif;
        margin: 0;
        padding: 0;

        &-container {
            background-color: white;
            border: 1px solid var(--gray-400);
            border-radius: 0.25rem;
            box-shadow: 0 0 5px 0 rgb(0 0 0 / 10%);
            color: black;
            padding: 1rem 0.5rem 0.5rem;
            width: 17rem;
        }

        &-song {
            margin-bottom: 0.5rem;
        }

        &-song-name {
            display: inline-block;
            margin-left: 0.5rem;
            max-width: 11rem;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        &-data {
            display: flex;
        }

        &-value {
            font-weight: 500;
            margin-left: auto;
            padding-left: 0.5rem;
        }

        &-header {
            font-weight: 500;
            padding-left: 1.3rem;
        }

        &-row-header {
            font-weight: 500;
        }

        &-bullet {
            padding-right: 0.5rem;
            width: 0.8rem;
        }

        &-date {
            color: var(--gray-500);
            font-size: 0.9rem;
            margin-left: 1.3rem;
        }
    }

    .highcharts-tooltip-box {
        fill: none;
        stroke: none;
    }

    &-error {
        left: 0;
        position: absolute;
        right: 0;
        text-align: center;
        top: 4rem;

        .card {
            border: none;
        }

        .Outline {
            margin-bottom: 1rem;
        }
    }

}

.Analytics {
    overflow: visible;
    position: relative;

    @include highcharts;
    @include insights-breadcrumb;

    .EpisodeRow-podcast-image {
        height: 40px;
        width: 40px;
        margin-right: 25px;
        background-color: var(--gray-100);
    }

    &-tool-bar {
        display: flex;
        justify-content: space-between;
        margin-bottom: 30px;
    }

    &-comparison-button {

        .Glyph {
            fill: var(--blue);
        }
    }

    &-comparison-header {
        display: flex;
        height: 80px;
        margin-bottom: 30px;
    }

    &-comparison-item {
        background-color: white;
        border-radius: 5px;
        box-shadow: 0 0 5px 0 rgb(0 0 0 / 20%);
        display: flex;
        flex: 1;
        margin-right: 25px;
    }

    &-comparison-box {
        border: 1px blue dashed;
        border-color: var(--blue);
        border-radius: 5px;
        cursor: pointer;
        display: flex;
        flex: 1;
        align-items: center;
        position: relative;

        .Glyph {
            fill: var(--blue);
        }
    }

    &-comparison-box-selector {
        color: var(--blue);
        margin: 0 auto;
        cursor: pointer;
    }

    &-comparison-podcast-image {
        height: 60px;
        width: 60px;
        min-width: 60px;
        margin-right: 20px;
        align-self: center;
    }

    &-comparison-item-clear {
        margin-right: 10px;
        margin-bottom: 45px;
        margin-left: auto;
        margin-top: 12px;
        cursor: pointer;

        .Glyph {
            fill: var(--gray-500);

            &:hover {
                fill: var(--gray-600);
            }
        }
    }

    &-comparison-placeholder-image {
        background-color: var(--gray-100);
        display: flex;
        align-items: center;
        justify-content: center;

        .Outline {
            height: 40px;
            width: 40px;
        }
    }

    &-comparison-circle {
        @include circle(8px);

        margin: 0 10px;
        display: inline-block;
        min-width: 8px;
        align-self: center;
    }

    &-comparison-subject {
        color: var(--gray-500);
        font-weight: 800;
        text-transform: uppercase;
        margin-top: 12px;
    }

    &-comparison-title {
        color: var(--gray-800);
        font-weight: 500;
        font-size: 16px;

        @include ellipse(1);
    }

    &-downloads-graph {
        clear: both;
    }

    &-highcharts-controls {
        float: right;
        display: inherit;

        &-graph-button {
            height: 40px;
        }
    }

    .table &-checkbox {
        vertical-align: middle;
        width: 20px;
    }

    .table &-table-column {
        font-size: 14px;
        vertical-align: middle;
        text-align: right;
    }

    &-header-average-consumption {
        text-align: right;
        max-width: 120px;
    }

    .table .Glyph {
        fill: var(--gray-500);
    }

    th.Analytics-sorted-header {
        color: var(--gray-700);
    }

    &-EpisodeRow {
        display: flex;

        .only-button {
            padding-top: 2px;
        }
    }

    &-EpisodeRow-truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 0;
        white-space: nowrap;
        width: 100%;
    }

    &-EpisodeRow-Title-Section {
        overflow: hidden;
    }

    &-EpisodeRow-Title {
        cursor: pointer;
        font-size: 14px;
        text-decoration: underline;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    &-table-show-name,
    &-retention-table-show-name {
        align-items: center;
        display: flex;
        font-size: 14px;
    }

    &-title-row {

        .only-button {
            margin-left: 2rem;
            opacity: 0;
            outline: none;
            transition: opacity ease 0.2s;
        }

        &:hover {

            .only-button {
                opacity: 1;
            }
        }
    }

    &-EpisodeRow-PodcastTitle {
        color: var(--gray-500);
        overflow: hidden;
        text-overflow: ellipsis;
    }

    &-header-right {
        text-align: right;
    }

    &-sort-header {
        cursor: pointer;
    }

    &-title {
        font-size: 24px;
        margin-bottom: 30px;
        display: inline-block;
    }

    &-listener-retention {

        &-header {
            display: flex;
            font-size: 24px;
            justify-content: space-between;
        }

        &-alert {
            height: 40px;
            margin-bottom: 5px !important;
            max-width: 550px;
            min-height: 40px !important;

            .InfoGlyph {
                height: 22px !important;
                width: 22px !important;
            }
        }
    }

    &-paging {
        justify-content: center;
        padding-top: 6px;
    }

    &-paging-link {
        padding-left: 25px;
        padding-right: 25px;
    }

    &-paging-link:nth-child(2) {
        border-left: 1px solid var(--gray-200);
    }

    &-sub-header {
        display: flex;
        justify-content: space-between;
    }

    &-sub-title {
        color: var(--gray-800);
        font-size: 18px;
        margin-bottom: 20px;
    }

    &-parent-filter {
        width: 250px !important;
        float: right;
    }

    &-breakdown-filter {
        width: 150px;
        display: inline-block;
        margin-left: 10px;
        margin-bottom: 50px;
    }

    .highcharts-container {
        margin-bottom: 10px;
        vertical-align: middle;
    }

    &-filter-summary {
        font-size: 12px;
        font-weight: 500;
        text-align: left;

        span {
            color: var(--gray-500);
            padding: 0 2px;
        }

        &-circle {
            @include circle(4px, var(--gray-500));

            display: inline-block;
            margin: 2px 5px;
        }

        &-stores {
            text-transform: capitalize;
        }
    }

    &-filter-crumb {
        text-align: right;

        span {
            font-weight: 500;
            color: var(--gray-800);
            padding: 0 5px;
        }

        span:not(:last-child) {
            border-right: 1px solid var(--gray-200);
        }
    }

    &-filter-bar {
        display: flex;
        justify-content: space-between;
    }

    &-filter-bar-left-group {
        display: flex;
    }

    &-filter-date {
        width: 200px;

        .Select__option--is-disabled {
            @include fonttype-label;
        }
    }

    .DateFilter {
        width: 200px;

        .Select__option--is-disabled {
            @include fonttype-label;
        }
    }

    &-filter-countries {
        width: 280px !important;
        margin-right: 20px;
    }

    &-filter-players {
        width: 200px !important;
        margin-right: 20px;
    }

    .card {
        margin-bottom: 50px;
    }

    &-downloads-by-show-card,
    &-retention-by-show-card {
        min-height: $analytics-card-height;

        .Loading {
            margin-top: 150px;
        }

        .table {
            margin-top: 10px;
            border-bottom: 1px solid var(--gray-200);
        }
    }

    &-downloads-by-show-card.card {
        margin-bottom: 10px;
    }

    th.Analytics-object-type-header {
        padding-left: 9px;
    }

    &-legend-circle {
        @include circle(8px);

        margin-right: 20px;
        margin-left: 25px;
        min-width: 8px;
    }

    &-legend-play-circle {
        @include circle(24px);

        margin-right: 20px;
        margin-left: 25px;
        min-width: 24px;
    }

    &-audio-player-section {
        background-color: var(--gray-100);
        padding: 10px;
    }

    &-audio-player-episode-name {
        color: var(--gray-600);
        padding-bottom: 5px;
    }

    .CloseGlyph {
        fill: var(--gray-500);
        float: right;
    }

    &-audio-player {
        height: 25px;
        outline: none;
        position: relative;
        width: 100%;
    }

    .AudioPlay * {
        fill: white;
        stroke: white;
    }

    .AudioPlay {
        width: 16px;
    }

    &-listener-retention-stores-checkboxes {
        text-align: right;
        text-transform: capitalize;
        font-size: 14px;
    }

    &-listener-retention-stores-warning {
        display: inline-block;
        text-transform: capitalize;
        margin-right: 10px;

        .Warning.Glyph {
            fill: var(--red);
        }
    }

    &-timezone-info {
        margin-bottom: 50px;
        color: var(--gray-500);
    }

    &-Top-section {
        display: flex;
    }

    &-Top {
        flex: 1;
    }

    &-Top:not(:last-child) {
        margin-right: 25px;
    }

    &-Top-title-box {
        align-items: center;
        border-radius: 3px;
        display: flex;
        background-image: linear-gradient(to left, var(--gray-100), var(--gray-200));
        padding: 10px;
        margin-bottom: 12px;
    }

    &-Top-title-circle {
        @include circle(8px);

        margin-right: 15px;
        margin-left: 20px;
        min-width: 8px;
    }

    &-Top-title-name {
        font-size: 14px;
        font-weight: 500;

        @include ellipse(1);
    }

    &-2D-insights-table {

        .Checkbox {
            cursor: pointer;
            display: flex;
            flex-direction: row;
            outline: none;

            &-label {
                margin-left: 0.5rem;
            }

            &-icon {
                align-items: center;
                background-color: var(--white);
                border-radius: 2px;
                border: 1px solid var(--gray-300);
                display: flex;
                padding: 0 2px;

                .Glyph {
                    fill: transparent;
                }

                &.checked {

                    .Glyph {
                        fill: var(--white);
                    }
                }
            }
        }

        &-container {
            overflow-x: auto;
            max-height: 560px;
        }

        .Analytics-select-all .Checkbox-icon.checked .Glyph {
            fill: var(--gray-800);
        }
    }
}