@use 'sass:map';
@use 'design-system' as *;
@use './AutomatedExamplesVars.module' as *;

$z-index-grid: 0;
$z-index-mouse-mask: 10000;
$z-index-debug-canvas: $z-index-mouse-mask + 10;
$z-index-splash: $z-index-debug-canvas + 10;
$z-index-debug-panel: $z-index-splash + 10;
$z-index-splash-contents: 10;

.automatedExampleWrapper {
    position: relative;
    z-index: $z-index-grid;
    aspect-ratio: 16 / 9;
    overflow: hidden;

    svg[class*='logo-mark'] {
        position: absolute;
        display: block;
        width: 64px * 2;
        height: 48px * 2;
        top: 51%;
        left: 50%;
        transform: translate(-60px, -48px) scale(1.5);
        z-index: 1;
    }
}

:global(.automated-integrated-charts-grid.ag-theme-quartz),
:global(.automated-integrated-charts-grid.ag-theme-quartz-dark) {
    aspect-ratio: 16 / 9;

    @media screen and (max-width: $breakpoint-automated-integrated-charts-medium) {
        width: 200% !important;
        transform-origin: top left;
        transform: scale(0.5);

        :global(.overlay-button) {
            cursor: default;
        }
    }

    @media screen and (max-width: $breakpoint-automated-row-grouping-small) {
        width: 300% !important;
        transform: scale(0.3333);
    }

    :global(.country) {
        display: flex;
        align-items: center;
        gap: $spacing-size-1;

        @media screen and (max-width: $breakpoint-automated-integrated-charts-medium) {
            gap: $spacing-size-2;
        }
    }

    :global(.flag) {
        margin-right: 2px;
        margin-top: -4px;
    }
}

:global(.automated-integrated-charts-grid.ag-theme-quartz-dark .context-replay-icon) {
    filter: invert(1);
}

.sectionFooter {
    display: none;
    justify-content: left;
    align-items: left;
    gap: $spacing-size-12;
    margin-top: $spacing-size-12;

    @media screen and (min-width: $breakpoint-automated-integrated-charts-medium) {
        display: flex;
    }

    button:not([class^='ag-']) {
        margin-left: $spacing-size-2;
    }
}

.mouseMask {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: $z-index-mouse-mask;
    pointer-events: none;

    // Start off hidden
    opacity: 0;

    :global(.mouse) {
        --mobile-mouse-scale: #{$mobile-grid-scale};

        position: absolute;
        top: $mouse-offset-top;
        left: $mouse-offset-left;

        @media screen and (max-width: $breakpoint-automated-integrated-charts-medium) {
            top: calc(#{$mouse-offset-top} * var(--mobile-mouse-scale));
            left: calc(#{$mouse-offset-left} * var(--mobile-mouse-scale));
            width: calc(#{$mouse-base-width} * var(--mobile-mouse-scale));
            height: calc(#{$mouse-base-height} * var(--mobile-mouse-scale));
        }
    }

    // Override inline styles for 'dark-mode' automated cursor
    :global(.highlight),
    :global(.animate-click) {
        fill: var(--color-link) !important;
    }

    :global(.highlight) {
        opacity: 0.15;
    }

    :global(.animate-click) {
        transform-origin: 50% calc(50% - 1px);
        opacity: 0;
        transition:
            opacity 0.2s ease-in-out,
            transform 0.2s ease-in-out;
        transform: scale(0.1);
    }

    :global(.animate .animate-click) {
        opacity: 0.3;
        transform: scale(1);
    }
}
