form.filter__timeframe {
  width: 100%;

  .select-field {
    max-width: var(--container-sm); /* Same as .chart__section--analysis */
  }

  .query-section {
    width: var(--container-sm);
  }
}

.chart__container {
  width: 100%;

  &.chart__container--center .chart__wrapper {
    margin: 0 auto;
  }
}

.chart__analysis-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;

  section.chart__section {

    .chart__sub_section--scroll {
      max-height: 300px;
      overflow-x: scroll;
    }

    &.chart__section--analysis {
      min-width: var(--container-sm);
    }

    &.chart__section--chart {
      flex: 1;
    }
  }
}

.chart__wrapper {
  display: flex;
  min-width: var(--container-xs);
  overflow: hidden;
  width: 99%;

  &.chart__wrapper--doughnut_chart, &.chart__wrapper--gauge_chart {
    aspect-ratio: 1 / 1;
  }

  &.chart__wrapper--bar_chart, &.chart__wrapper--line_chart {
    aspect-ratio: 2 / 1;
  }

  &.chart__wrapper--s {
    &.chart__wrapper--doughnut_chart, &.chart__wrapper--gauge_chart {
      max-width: var(--container-s);
    }

    &.chart__wrapper--bar_chart, &.chart__wrapper--line_chart {
      max-width: var(--container-sm);
    }

    &.chart__wrapper--bar_chart, &.chart__wrapper--bubble_chart {
      max-width: var(--container-sm);
    }
  }

  &.chart__wrapper--m {
    &.chart__wrapper--doughnut_chart, &.chart__wrapper--gauge_chart {
      max-width: var(--container-sm);
    }

    &.chart__wrapper--bar_chart, &.chart__wrapper--line_chart {
      max-width: var(--container-m);
    }

    &.chart__wrapper--bar_chart, &.chart__wrapper--bubble_chart {
      max-width: var(--container-m);
    }
  }

  &.chart__wrapper--l {
    &.chart__wrapper--doughnut_chart, &.chart__wrapper--gauge_chart {
      max-width: var(--container-m);
    }

    &.chart__wrapper--bar_chart, &.chart__wrapper--line_chart {
      max-width: var(--container-l);
    }

    &.chart__wrapper--bar_chart, &.chart__wrapper--bubble_chart {
      max-width: var(--container-l);
    }
  }

  &.chart__wrapper--f { /* Full Width */
    &.chart__wrapper--doughnut_chart, &.chart__wrapper--gauge_chart {
      max-width: 100%;
    }

    &.chart__wrapper--bar_chart, &.chart__wrapper--line_chart {
    }
  }

  &.chart__wrapper--skeleton {
    animation: loadingShine 1.5s infinite;
    background-color: var(--light-gray);
    background-image: linear-gradient(90deg, var(--light-gray), var(--off-white) 50%, var(--light-gray) 100%);
    background-repeat: no-repeat;
    background-size: 40% 100%;
    display: block;

    &.chart__wrapper--doughnut_chart {
      border-radius: 100%;
    }

    &.chart__wrapper--bar_chart {
      clip-path: polygon(65% 20%, 65% 100%, 40% 100%, 40% 75%, 20% 75%, 20% 101%, 90% 100%, 90% 50%, 70% 50%, 70% 100%, 45% 100%, 45% 20%);
    }

    &.chart__wrapper--line_chart {
      clip-path: polygon(30% 64%, 40% 48%, 50% 72%, 60% 36%, 70% 60%, 80% 55%, 90% 70%, 100% 48%, 100% 100%, 0 100%, 10% 73%, 20% 83%);
    }

    &.chart__wrapper--gauge_chart {
      clip-path: circle(50% at 50% 100%);
    }
  }
}