as-graph,
as-graph-data {
    --axe-width: var(--as-size-xxs);
    --columns-gap: var(--as-size-xxs);
    --column-min-width: var(--as-size-xxxl);
    --column-max-width: calc(2 * var(--column-min-width));
    --label-offset: var(--as-space-l);
    --chartarea-min-height: calc(4 * var(--column-min-width));
    --axe-color: var(--as-color-text-strong);
    --button-bg-color: var(--as-color-text-button);
    --button-text-color: var(--as-color-accent);
    --button-border-width: 0.0625rem;
    --transition-duration: .3s;
    --timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    --color-legend-hover: var(--as-color-background-nav-weak);
    --yAxisSize: 4em;
    --color: var(--as-color-status-success-weak);
    --divider-width: var(--axe-width);
    --divider-color: var(--as-color-text-);
    --chartarea-color: var(--as-color-background-nav-weak);
    --linechart-color: var(--as-color-accent);
    display: block;
    margin-inline: 2rem;
    margin-block: 2rem;
}

as-graph:has([data-charttype="pie"]) {
    --yAxisSize: 0;
}

as-graph:has([data-charttype="spiral"]) {
    --yAxisSize: 0;
}

as-graph:has([data-charttype="ring"]) {
    --yAxisSize: 0;
}

as-graph:has([data-charttype="heatmap"]) {
    --yAxisSize: 0;
}

as-graph:has([data-charttype="heatmapdeep"]) {
    --yAxisSize: 0;
}

as-graph .controls {
    min-width: var(--width);
    display: flex;
    flex-wrap: wrap;
    align-self: flex-end;
    gap: 1em;
    justify-content: space-between;
    margin-block: 1em;
    /*margin-inline-start: var(--yAxisSize);*/
}

as-graph .controls>div {
    display: flex;
    flex-wrap: nowrap;
    align-self: end;
    align-items: end;
    gap: .5em;
}

as-graph .controls label,
.csv__download_btn {
    padding-block-end: .25em;
}

/*as-graph .controls button,
.csv__download_btn
{
    appearance: none;
    padding: .5rem;
    border: var(--button-border-width) solid var(--button-text-color);
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    cursor: pointer;
    border-radius: 0;
    transition: box-shadow .15s ease-out;
    align-self: end;
}

as-graph .controls button:not([disabled]):HOVER,
as-graph .controls button:not([disabled]):FOCUS,
.csv__download_btn:not([disabled]):HOVER,
.csv__download_btn:not([disabled]):FOCUS
{
    outline: none;
    box-shadow: .25rem .25rem 0 var(--button-text-color);
}*/
as-graph .controls button[disabled],
.csv__download_btn[disabled] {
    opacity: .5;
}

as-graph .controls select {
    --_chevron-down: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="125.143" viewBox="0 0 200 125.143"><path d="M24.086,0a4.793,4.793,0,0,1,3.476,1.457l71.526,74.1L173.214,4.047a4.765,4.765,0,0,1,6.733.114l18.722,19.379a4.765,4.765,0,0,1-.124,6.733l-96.923,93.533a4.765,4.765,0,0,1-6.733-.114L1.336,26.788a4.755,4.755,0,0,1,.124-6.733L20.829,1.343A4.738,4.738,0,0,1,24.086,0Z" transform="translate(0)"/></svg>');
    appearance: none;
    padding: .5rem;
    padding-inline-end: 1.5rem;
    border: var(--button-border-width) solid var(--button-text-color);
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    cursor: pointer;
    border-radius: 0;
    transition: box-shadow .15s ease-out;
    background-image: var(--_chevron-down);
    background-repeat: no-repeat;
    background-size: 1em auto;
    background-position: calc(100% - .5em) 50%;
}

as-graph .controls select:HOVER,
as-graph .controls select:FOCUS {
    outline: none;
    box-shadow: .25rem .25rem 0 var(--button-text-color);
}

as-graph .controls select.resolution {
    min-width: 7em
}

as-graph input[type="checkbox"],
as-graph-data input[type="checkbox"] {
    width: 0px;
    height: 0px;
    opacity: 0;
    top: -10rem;
    left: -10rem;
}

as-graph input[type="checkbox"]+label,
as-graph-data .filtering input[type="checkbox"]+label {
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    display: flex;
    align-items: flex-start;
    gap: .5em;
    position: relative;
}

as-graph input[type="checkbox"]+label::before,
as-graph-data input[type="checkbox"]+label::before {
    content: '';
    border: 1px solid var(--axe-color);
    border-radius: 0;
    display: inline-block;
    position: relative;
    padding: 2px;
    background-color: var(--divider-color);
    cursor: pointer;
    width: 1em;
    aspect-ratio: 1/1;
    transition: box-shadow .15s ease-out;
}

as-graph input[type="checkbox"]+label:HOVER::before,
as-graph input[type="checkbox"]+label:FOCUS::before,
as-graph-data input[type="checkbox"]+label:HOVER::before,
as-graph-data input[type="checkbox"]+label:FOCUS::before {
    outline: none;
    box-shadow: .125rem .125rem 0 var(--button-text-color);
}

as-graph input[type="checkbox"]:checked+label::after,
as-graph-data input[type="checkbox"]:checked+label::after {
    --icon-checkmark: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi4xMjEiIGhlaWdodD0iOC45NTMiIHZpZXdCb3g9IjAgMCAxMi4xMjEgOC45NTMiPgogIDxwYXRoIGlkPSJpY29uLWNoZWNrbWFyayIgZD0iAS43NSw0LjU2LDQuMDgzLDcuODkzLDEwLjc1Ljc1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjMxMSAwLjMxKSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41Ii8+Cjwvc3ZnPgo=);
    position: absolute;
    content: '';
    border: 1px solid transparent;
    border-radius: 0;
    display: inline-block;
    padding: 2px;
    cursor: pointer;
    top: 0;
    left: 0;
    background-color: var(--axe-color);
    -webkit-mask-image: var(--icon-checkmark);
    mask-image: var(--icon-checkmark);
    -webkit-mask-size: 65% 65%;
    mask-size: 65% 65%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 50% 50%;
    mask-position: 50% 50%;
    mask-repeat: 50% 50%;
    width: 1em;
    aspect-ratio: 1/1;
}

as-graph .controls .select label {
    display: block;
}

as-graph div:has(> label + as-table-actions) {
    display: flex;
    position: relative;
    align-items: center;
    min-height: calc(2rem + 2px);
}

as-graph as-table-actions {
    display: none;
}

as-graph input[type="checkbox"][checked]+label+as-table-actions {
    display: block;
    margin-inline-start: .5rem;
}

as-graph .current {
    display: flex;
    justify-content: center;
    margin-block: 2rem;
}

as-graph .charttitle {
    font-size: 2em;
    margin-block: 1em;
    text-align: center;
    margin-inline-start: calc(.5 * var(--yAxisSize));
}

as-graph figure {
    position: relative;
    display: block;
    min-width: var(--width);
    margin-inline-start: var(--yAxisSize);
    background-color: unset;
    transition-property: all;
    transition-timing-function: var(--timing-function);
    transition-duration: var(--transition-duration);
}

as-graph figure .xtitle {
    margin-block-start: 1.5em;
    text-align: center;
    font-size: 1.5em;
}

as-graph figure .chartarea .ytitle {
    text-align: center;
    font-size: 1.5em;
    transform: rotate(270deg);
    position: absolute;
    right: unset;
    bottom: unset;
    left: calc(-1 * var(--yAxisSize));
    height: 100%;
    aspect-ratio: 1/1;
}

as-graph figure .chartarea {
    position: relative;
}

as-graph figure:has([data-charttype="columns"]) .chartarea {
    height: var(--width);
    min-height: var(--chartarea-min-height);
    /*aspect-ratio: 2/1;*/
    background-color: var(--chartarea-color);
}

as-graph figure:has([data-charttype="pie"]) {
    background-color: transparent;
    display: grid;
    grid-template-columns: 2fr 1fr;
}

as-graph figure:has([data-charttype="pie"]) .chartarea {
    height: var(--width);
    aspect-ratio: 1/1;
}

as-graph figure:has([data-charttype="spiral"]) {
    background-color: transparent;
    display: grid;
    grid-template-columns: 2fr 1fr;
}

as-graph figure:has([data-charttype="spiral"]) .chartarea {
    height: var(--width);
    aspect-ratio: 1/1;
}

as-graph figure:has([data-charttype="ring"]) {
    background-color: transparent;
    display: grid;
    grid-template-columns: 2fr 1fr;
}

as-graph figure:has([data-charttype="ring"]) .chartarea {
    height: var(--width);
    aspect-ratio: 1/1;
}

as-graph figure .chartarea>* {
    position: absolute;
    inset: 0;
}

/**** horizontal lines wrapper ****/
as-graph figure .chartarea .y {
    position: absolute;
    width: 100%;
    height: calc(100% + 1rem - var(--axe-width));
    margin-block-start: -.5rem;
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    align-items: flex-start;
}

/**** vertical axis ****/
as-graph figure .chartarea .y:before {
    content: "";
    height: calc(100% - 1rem);
    width: var(--axe-width);
    background-color: var(--axe-color);
    display: block;
    position: absolute;
    top: .5rem;
}

/**** horizontal line with label ****/
as-graph figure .chartarea .y>div {
    margin-inline-start: calc(-1 * var(--yAxisSize) + var(--axe-width));
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% + var(--yAxisSize) - var(--axe-width));
    line-height: 1;
    transition-property: opacity, height;
    transition-timing-function: var(--timing-function);
    transition-duration: var(--transition-duration);
}

as-graph figure .chartarea:has([animate]) .y>div {
    opacity: 0;
}

/**** horizontal line label ****/
as-graph figure .chartarea .y>div::before {
    display: block;
    content: attr(data-value);
    width: 4rem;
    text-align: right;
    padding-inline-end: 0.5rem;
}

/**** horizontal line ****/
as-graph figure .chartarea .y>div:after {
    content: "";
    display: block;
    width: calc(100% - 2 * var(--axe-width));
    border-bottom: 1px dotted var(--axe-color);
    opacity: 0.5;
}

/**** horizontal line @ zero ****/
/* as-graph figure .chartarea .y>div:first-child:after {
     border-bottom: 1px dotted transparent;
} */

as-graph figure .chartarea .x {
    position: absolute;
    height: var(--axe-width);
    width: 100%;
    background-color: var(--axe-color);
    bottom: 0;
    top: unset;
}

as-graph figure .chartarea .chart[data-charttype="columns"] {
    position: absolute;
    display: flex;
    align-items: flex-end;
    padding-inline-start: var(--axe-width);
    margin-inline-start: var(--axe-width);
    z-index: 2;
    transition-property: opacity, height;
    transition-timing-function: var(--timing-function);
    transition-duration: var(--transition-duration);
    overflow-x: scroll;
    overflow-y: visible;
    height: calc(100% + var(--label-offset) - var(--axe-width));
    padding-block-end: var(--label-offset);
    width: calc(100% - 2 * var(--axe-width));
}

as-graph table {
    display: none;
}

as-graph svg.linechart {
    display: none;
    position: absolute;
    z-index: 5;
    cursor: not-allowed;
}

as-graph svg.linechart circle {
    fill: var(--_color, var(--color));
    stroke: var(--linechart-color);
    stroke-width: 2;
}

as-graph svg.linechart circle {
    cursor: zoom-in;
    transition: all .3s ease-in-out;
}

as-graph svg.linechart circle:hover {
    r: 12;
}

as-graph svg.linechart line,
as-graph svg.linechart path {
    stroke: var(--linechart-color);
    stroke-width: 2;
}

as-graph figure .chartarea .chart[data-charttype="columns"][showlinechart] svg.linechart {
    display: block;
}

/* as-graph figure .chartarea .chart[animate] {} */

as-graph figure .chartarea .chart[data-charttype="columns"]>div.proxy {
    position: absolute;
    display: flex;
    align-items: flex-end;
    padding-inline-start: var(--axe-width);
    margin-inline-start: var(--axe-width);
    z-index: 2;
    transition-property: opacity, height;
    transition-timing-function: var(--timing-function);
    transition-duration: var(--transition-duration);
    overflow-y: visible;
    height: calc(100% - var(--label-offset) + 2 * var(--axe-width));
    min-width: calc(100% - 2 * var(--axe-width));
}

as-graph figure .chartarea .chart[data-charttype="columns"]>div.proxy>div.wrapper {
    display: flex;
    align-items: flex-end;
    gap: var(--columns-gap);
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background-color: transparent;
    margin-inline: 0;
    position: relative;
    z-index: 4;
    border: unset;
    min-width: var(--column-min-width);
}

as-graph figure .chartarea .chart[data-charttype="columns"]>div.proxy>div.wrapper>div {
    cursor: not-allowed;
    box-sizing: border-box;
    width: 100%;
    height: var(--height);
    background-color: var(--_color, var(--color));
    margin-inline: calc(2 * var(--axe-width));
    border: 1px solid var(--_color, var(--color));
    transition-property: border, opacity, height, width, box-shadow;
    transition-timing-function: var(--timing-function);
    transition-duration: var(--transition-duration);
    transition-delay: var(--transition-delay);
    position: relative;
    /*min-width: var(--column-min-width);
        /*max-width: var(--column-max-width);*/
}

as-graph figure .chartarea .chart[data-charttype="columns"]>div.proxy>div.wrapper>div.drilldown {
    cursor: zoom-in;
}

as-graph figure .chartarea .chart[data-charttype="columns"]>div.proxy>div.wrapper>div.drilldown:before {
    content: '+';
    display: flex;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    font-size: 2em;
    align-items: center;
    justify-content: center;
    transition-property: opacity, font-size;
    transition-timing-function: var(--timing-function);
    transition-duration: var(--transition-duration);
    transition-delay: var(--transition-delay);
}

as-graph figure .chartarea .chart[data-charttype="columns"]>div.proxy>div.wrapper>div.drilldown:HOVER:before {
    font-size: 4em;
}

as-graph figure .chartarea .chart[data-charttype="columns"][animate]>div.proxy>div.wrapper>div {
    height: 0;
}

as-graph figure .chartarea .chart[data-charttype="columns"]>div.proxy>div.wrapper>div:after {
    width: 100%;
    content: attr(data-label);
    position: absolute;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    bottom: -1.5em;
    opacity: 1;
    transition-property: opacity, height;
    transition-timing-function: var(--timing-function);
    transition-duration: var(--transition-duration);
    transition-delay: var(--transition-delay);
}

as-graph figure .chartarea .chart[animate]>div.proxy>div.wrapper>div:after,
as-graph figure .chartarea .chart[animate]>div.proxy>div.wrapper>div:before,
as-graph figure .chartarea .chart[animate]>div.proxy>div.wrapper>div>.marker {
    opacity: 0;
}

as-graph figure .chartarea .chart[data-charttype="columns"]>div.proxy>div.wrapper>div[active] {
    /*    width: 200%;*/
    box-shadow:
        1px -1px 0 var(--button-text-color), 2px -2px 0 var(--button-text-color), 3px -3px 0 var(--button-text-color), 4px -4px 0 var(--button-text-color), 5px -5px 0 var(--button-text-color), 6px -6px 0 var(--button-text-color), 7px -7px 0 var(--button-text-color), 8px -8px 0 var(--button-text-color), 9px -9px 0 var(--button-text-color), 10px -10px 0 var(--button-text-color);
    /* box-shadow: inset 0 0 10px var(--button-text-color); */
    opacity: 0.8;
    border: 1px solid var(--button-text-color);
}

as-graph figure .chartarea .chart[data-charttype="columns"][showlinechart]>div.proxy>div.wrapper>div {
    opacity: .5;
}

as-graph figure .chartarea .chart[data-charttype="pie"] {
    display: block;
    padding-block-end: 0;
    padding-inline-start: 0;
}

as-graph figure .chartarea .chart[data-charttype="spiral"] {
    display: block;
    padding-block-end: 0;
    padding-inline-start: 0;
}

as-graph figure ul.legend {
    margin-block: 3em;
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    list-style: none;
    align-self: center;
}

as-graph figure ul.legend>* {
    display: flex;
    gap: .5em;
    line-height: 1;
    align-items: center;
    cursor: default;
    position: relative;
    z-index: 2;
    appearance: none;
    border: unset;
    background-color: unset;
    font-size: inherit;
}

as-graph figure ul.legend>*:before {
    content: '';
    width: 1em;
    aspect-ratio: 1/1;
    flex-shrink: 0;
    border: 1px solid var(--button-text-color);
    background-color: var(--_color, var(--color));
}

as-graph figure ul.legend>*:HOVER,
as-graph figure ul.legend>*:FOCUS,
as-graph figure ul.legend>* [active] {
    outline: none;
}

as-graph figure ul.legend>*:HOVER:after,
as-graph figure ul.legend>*:FOCUS:after,
as-graph figure ul.legend>* [active]:after {
    content: '';
    display: block;
    width: calc(100% + 1em);
    height: calc(100% + 1em);
    position: absolute;
    z-index: -1;
    inset: -.5em;
    background-color: var(--color-legend-hover);
    box-shadow: .125rem .125rem 0 var(--button-text-color);
    transition: all .15s var(--timimng-function);
}

as-graph figure .chartarea .chart[data-charttype="pie"]>div {
    margin-inline: 0;
    display: block;
    position: absolute;
    width: 80%;
    height: 80%;
    inset: 10%;
    aspect-ratio: 1/1;
    border-radius: 100%;
    background-color: transparent;
    background-image:
        conic-gradient(transparent var(--stop1), var(--_color, var(--color)) var(--stop1), var(--_color, var(--color)) var(--stop2), transparent var(--stop2), transparent 100%);
    border: none;
    transition-property: inset, width, height, opacity, scale, transform;
    transition-timing-function: var(--timing-function);
    transition-duration: var(--transition-duration);
    transition-delay: var(--transition-delay);
}

as-graph figure .chartarea .chart[data-charttype="pie"]>div>.marker {
    position: absolute;
    z-index: 8;
    display: block;
    top: var(--y);
    left: var(--x);
    white-space: nowrap;
    color: var(--button-text-color);
    font-size: .6rem;
    padding-inline: .5em;
    padding-block: .25em;
    background-color: var(--color-legend-hover);
    box-shadow: .125rem .125rem 0 var(--button-text-color);
    transition-property: opacity, font-size;
    transition-timing-function: var(--timing-function);
    transition-duration: var(--transition-duration);
    transition-delay: var(--transition-delay);
    transform-origin: 50% 50%;
}

as-graph figure .chartarea .chart[data-charttype="pie"]>div.drilldown>.marker {
    left: calc(1rem + var(--x));
}

as-graph figure .chartarea .chart[data-charttype="pie"]>div.drilldown>.marker:before {
    content: '+';
    display: block;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: -1rem;
    font-size: 3.35em;
    line-height: 0;
    color: inherit;
}

as-graph figure .chartarea .chart[data-charttype="pie"][showabsolutescale]>div {
    scale: var(--scale, 1);
}

as-graph figure .chartarea .chart[data-charttype="pie"]>div[active] {
    inset: 5%;
    width: 90%;
    height: 90%;
    z-index: 7;
    scale: 1;
    transform: translate(calc(-1 * var(--x)), calc(-1 * var(--y)))
}

as-graph figure .chartarea .chart[data-charttype="pie"]:has(> div[active]) .marker,
as-graph figure .chartarea .chart[data-charttype="pie"][showabsolutescale]>div>.marker {
    opacity: 0;
}

as-graph figure .chartarea .chart[data-charttype="pie"]>div[active] .marker {
    opacity: 1;
    font-size: 1rem;
}

as-graph figure .chartarea .chart[data-charttype="pie"]>div:before,
as-graph figure .chartarea .chart[data-charttype="pie"]>div:after {
    content: '';
    z-index: -1;
    display: block;
    position: absolute;
    width: 50%;
    height: var(--divider-width);
    top: calc(50% - .5 * var(--divider-width));
    left: calc(50% - .25 * var(--divider-width));
    rotate: var(--rotate1);
    transform-origin: 0% calc(.5 * var(--divider-width));
    background-color: var(--divider-color);
    z-index: 6;
}

as-graph figure .chartarea .chart[data-charttype="pie"]>div:after {
    rotate: var(--rotate2);
}

as-graph figure .chartarea .chart[data-charttype="pie"][showabsolutescale]>div:before,
as-graph figure .chartarea .chart[data-charttype="pie"][showabsolutescale]>div:after {
    height: calc(var(--divider-width)/var(--scale));
}

as-graph figure .chartarea .chart[data-charttype="pie"]>div[active]:before,
as-graph figure .chartarea .chart[data-charttype="pie"]>div[active]:after {
    content: '';
    height: var(--divider-width);
}

as-graph figure .chartarea .chart[data-charttype="pie"]:has([active])>div:not([active]) {
    transition-delay: 0ms;
    /*    opacity: 0.3;*/
}

as-graph figure .chartarea .chart[data-charttype="pie"][animate]>div {
    height: 0;
    width: 0;
    inset: 50%;
}

as-graph figure .chartarea .chart[data-charttype="heatmap"] {
    position: static;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50px, 31fr));
    gap: 0.25em;
}

as-graph figure .chartarea .chart[data-charttype="heatmap"]>* {
    aspect-ratio: 1/1;
    /*border: 1px solid #023020;*/
    cursor: pointer;
    display: grid;
    align-content: center;
    justify-content: center;
}

as-graph figure .chartarea .chart[data-charttype="heatmap"]>as-gauge>div:last-child {
    opacity: 0.3;
}

as-graph figure .chartarea .chart[data-charttype="heatmap"]>as-gauge:HOVER>div:last-child,
as-graph figure .chartarea .chart[data-charttype="heatmap"]>as-gauge:FOCUS>div:last-child {
    outline: none;
    opacity: 1;
}

as-graph figure .chartarea .chart[data-charttype="heatmap"]>div.proxy>div.wrapper>div[active] {
    box-shadow: 1px -1px 0 var(--button-text-color), 2px -2px 0 var(--button-text-color), 3px -3px 0 var(--button-text-color), 4px -4px 0 var(--button-text-color), 5px -5px 0 var(--button-text-color), 6px -6px 0 var(--button-text-color), 7px -7px 0 var(--button-text-color), 8px -8px 0 var(--button-text-color), 9px -9px 0 var(--button-text-color), 10px -10px 0 var(--button-text-color);
    opacity: 0.8;
    border: 1px solid var(--button-text-color);
}

/* HEATMAP DEEP */
as-graph figure:has([data-charttype="heatmapdeep"]) {
    position: static;
}

as-graph figure .chartarea .chart[data-charttype="heatmapdeep"] {
    position: static;
    display: grid;
    gap: .25em;
    align-items: center;
}

as-graph figure .chartarea .chart[data-charttype="heatmapdeep"]>* {
    display: grid;
    grid-template-columns: repeat(31, 1fr);
    gap: 0.25em;
    align-items: center;
    transition-property: opacity;
    transition-timing-function: var(--timing-function);
    transition-duration: var(--transition-duration);
    transition-delay: var(--transition-delay);
}

as-graph figure .chartarea .chart[data-charttype="heatmapdeep"]>*:BEFORE {
    content: attr(data-label);
    grid-column: 1/4;
}

as-graph figure .chartarea .chart[data-charttype="heatmapdeep"]>*>* {
    aspect-ratio: 1/1;
    transition-property: opacity;
    transition-timing-function: var(--timing-function);
    transition-duration: var(--transition-duration);
    transition-delay: var(--transition-delay);
}

as-graph figure .chartarea .chart[data-charttype="heatmapdeep"][animate]>div {
    opacity: 0;
}

as-graph figure .chartarea .chart[data-charttype="heatmapdeep"]>.drilldown {
    cursor: zoom-in;
}

as-graph figure .chartarea .chart[data-charttype="heatmapdeep"]>.drilldown:HOVER {
    outline: none;
    position: relative;
}

as-graph figure .chartarea .chart[data-charttype="heatmapdeep"]>.drilldown:HOVER:AFTER {
    content: '';
    display: block;
    width: calc(100% + .3em);
    height: calc(100% + .3em);
    position: absolute;
    z-index: -1;
    inset: -.15em;
    background-color: var(--color-legend-hover);
}

/* RING CHART */
as-graph figure .chartarea .chart[data-charttype="ring"]>div {
    margin-inline: 0;
    display: block;
    position: absolute;
    width: calc(90% - .9 * var(--inset));
    height: calc(90% - .9 * var(--inset));
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    aspect-ratio: 1/1;
    border-radius: 100%;
    background-color: transparent;
    background-image:
        conic-gradient(transparent var(--stop1), var(--_color, var(--color)) var(--stop1), var(--_color, var(--color)) var(--stop2), transparent var(--stop2), transparent 100%);
    border: none;
    transition-property: inset, width, height, opacity, scale, transform;
    transition-timing-function: var(--timing-function);
    transition-duration: var(--transition-duration);
    transition-delay: var(--transition-delay);
}

as-graph figure .chartarea .chart[data-charttype="ring"]:has([active])>div[data-id]:not([active]) {
    transition-delay: 0ms;
    opacity: .15;
}

as-graph figure .chartarea .chart[data-charttype="ring"][animate]>div {
    height: 0;
    width: 0;
    inset: 50%;
}

/* SPIRAL CHART */
as-graph figure .chartarea .chart[data-charttype="spiral"]>div {
    margin-inline: 0;
    display: block;
    position: absolute;
    width: calc(90% - .9 * var(--inset));
    height: calc(90% - .9 * var(--inset));
    aspect-ratio: 1/1;
    border-radius: 100%;
    background-color: transparent;
    background-image:
        conic-gradient(transparent var(--stop1), var(--_color, var(--color)) var(--stop1), var(--_color, var(--color)) var(--stop2), transparent var(--stop2), transparent 100%);
    border: none;
    transition-property: inset, width, height, opacity, scale, transform;
    transition-timing-function: var(--timing-function);
    transition-duration: var(--transition-duration);
    transition-delay: var(--transition-delay);
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
}

as-graph figure .chartarea .chart[data-charttype="spiral"]>.divider-ring {
    opacity: 0;
}

as-graph figure .chartarea .chart[data-charttype="spiral"][showrings]>.divider-ring {
    opacity: 1;
}

as-graph figure .chartarea .chart[data-charttype="spiral"]>div[active] {
    width: 90%;
    height: 90%;
}

as-graph figure .chartarea .chart[data-charttype="spiral"]>div:before,
as-graph figure .chartarea .chart[data-charttype="spiral"]>div:after {
    content: '';
    z-index: -1;
    display: block;
    position: absolute;
    width: 50%;
    height: var(--divider-width);
    top: calc(50% - .5 * var(--divider-width));
    left: calc(50% - .25 * var(--divider-width));
    rotate: var(--rotate1);
    transform-origin: 0% calc(.5 * var(--divider-width));
    background-color: var(--divider-color);
    z-index: 6;
}

as-graph figure .chartarea .chart[data-charttype="spiral"]>div:after {
    rotate: var(--rotate2);
}

as-graph figure .chartarea .chart[data-charttype="spiral"]>div[active]:before,
as-graph figure .chartarea .chart[data-charttype="spiral"]>div[active]:after {
    content: '';
    height: var(--divider-width);
}

as-graph figure .chartarea .chart[data-charttype="spiral"]:has([active])>div:not([active]) {
    transition-delay: 0ms;
    opacity: 0.3;
}

as-graph figure .chartarea .chart[data-charttype="spiral"]:not([showrings]):has([active])>.divider-ring {
    opacity: 0;
}

as-graph figure .chartarea .chart[data-charttype="spiral"][showrings]:has([active])>.divider-ring {
    opacity: 1;
}

as-graph figure .chartarea .chart[data-charttype="spiral"][animate]>div {
    height: 0;
    width: 0;
    inset: 50%;
}

@media screen and (max-width: 60rem) {
    as-graph :is(figure:has([data-charttype="pie"]), figure:has([data-charttype="ring"]), figure:has([data-charttype="spiral"])) {
        grid-template-columns: 1fr;
    }
}