@import (reference) "@nova-ui/bits/sdk/less/nui-framework-variables";
@import (reference) "./nui-charts-variables.less";
@import (reference) "@nova-ui/bits/sdk/less/mixins.less";

@nui-legend-series-max-width: 250px;
@nui-legend-series-description-min-width: 130px; // 180px from mockups - 50px for tile

.nui-chart-layout {
    display: grid;
    grid-template:
        "axis-label-left    axis-label-right    ." 0fr
        "chart              chart               legend" 1fr
        "axis-label-bottom  axis-label-bottom   ." 0fr
        "legend-bottom      legend-bottom       ." 0fr
        ~"/" 1fr 1fr auto;

    .axis-label-left {
        grid-area: axis-label-left;
        justify-self: start;
        margin-bottom: @nui-space-xs;
        margin-right: @nui-space-xs;
    }

    .axis-label-right {
        grid-area: axis-label-right;
        justify-self: end;
        margin-bottom: @nui-space-xs;
        margin-left: @nui-space-xs;
    }

    .axis-label-bottom {
        grid-area: axis-label-bottom;
        justify-self: center;
        margin-top: @nui-space-xs;
    }

    .chart {
        grid-area: chart;
        display: flex;
        justify-content: stretch;

        &.has-overlay {
            position: relative;

            & .overlay {
                position: absolute;
                box-sizing: border-box;
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                pointer-events: none;
            }
        }
    }

    .legend {
        grid-area: legend;
        align-self: start;
        padding-left: @nui-space-xs;
        // TODO: Merge this class with .legend (breaking change)
        // https://jira.solarwinds.com/browse/NUI-3766
        &.scrollable {
            overflow: auto;
            height: 100%;
        }
    }

    .legend-bottom {
        grid-area: legend-bottom;
        justify-self: center;
        margin-top: @nui-space-xs;
    }

    @media print {
        break-inside: avoid;
    }
}

.nui-legend-series {
    padding: @nui-space-xxs;
    max-width: @nui-legend-series-max-width;
    cursor: default; // to prevent text selection cursor
    .setCssVariable(background-color, nui-color-bg-content);

    &:not(.nui-legend-series--horizontal):not(:last-child) {
        margin-bottom: 1px;
    }

    & &__tile-wrapper {
        display: flex;
        justify-content: center;
    }

    & &__tile {
        display: flex;
    }

    &--horizontal:not(:last-child) {
        margin-right: @nui-space-sm;
    }

    &:empty {
        display: none;
    }

    &.description-min-width--unset {
        .description {
            min-width: unset !important;
        }
    }

    & .description {
        line-height: @nui-line-height-default;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        padding-left: @nui-space-xs;
        padding-right: @nui-space-xs;
        min-width: @nui-legend-series-description-min-width;

        &-container {
            overflow: hidden;
        }

        &-primary {
            font-weight: @nui-font-weight-semibold;
            .setCssVariable(color, nui-color-text-default);
        }

        &-primary:not(:last-child) {
            margin-bottom: -@nui-legend-series-content-margin;
        }

        &-secondary {
            .setCssVariable(color, nui-color-text-secondary);
        }

        &-secondary:not(:first-child) {
            margin-top: -1px;
        }
    }

    & .legend-menu {
        display: none;
        align-items: center;
    }

    &:hover .legend-menu {
        display: flex;
    }

    &--interactive {
        cursor: pointer;

        & .nui-legend-series__tile-wrapper {
            position: relative;

            .nui-legend-series__checkbox {
                &-wrapper {
                    align-self: center;
                    position: absolute;
                    visibility: hidden;

                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }

                &-mark {
                    .nui-checkbox__mark();
                }

                &-glyph {
                    .nui-checkbox__glyph();
                    display: none;
                }

                &--checked {
                    .nui-legend-series__checkbox-mark {
                        .setCssVariable(background-color, nui-color-active);
                        .setCssVariable(border-color, nui-color-active);

                        > .nui-legend-series__checkbox-glyph {
                            display: block;
                        }
                    }
                }
            }
        }

        & .nui-legend-series--deselected,
        & .nui-legend-series__tile-wrapper:hover {
            .nui-legend-series__checkbox-wrapper {
                visibility: visible;
            }

            .nui-legend-series__tile {
                visibility: hidden;
            }
        }

        & .nui-legend-series__tile-wrapper:hover {
            .setCssVariable(background-color, nui-color-bg-transparent-hover);
        }

        &:hover {
            .setCssVariable(background-color, nui-color-bg-light-hover);

            .nui-legend-series--deselected {
                .nui-legend-series__tile-wrapper {
                    .setCssVariable(background-color, nui-color-bg-transparent-hover);
                }
            }
        }

        &:not(:hover) {
            .nui-legend-series--deselected {
                .nui-legend-series__tile-wrapper {
                    .setCssVariable(background-color, nui-color-bg-secondary);
                }
            }
        }
    }

    &:not(:hover) &--state-hidden {
        .description-container {
            opacity: @nui-legend-deemphasized-opacity;
        }
    }

    & &--state-deemphasized {
        opacity: @nui-legend-deemphasized-opacity;
    }
}