.fi-wi-chart {
    & .fi-wi-chart-canvas-ctn {
        @apply mx-auto;

        &:not(.fi-wi-chart-canvas-ctn-no-aspect-ratio) {
            @apply aspect-square;
        }
    }

    @supports (container-type: inline-size) {
        & .fi-section-content {
            @apply @container;
        }

        & .fi-wi-chart-canvas-ctn:not(.fi-wi-chart-canvas-ctn-no-aspect-ratio) {
            @apply @sm:aspect-[2];

            &[data-chart-type='doughnut'],
            &[data-chart-type='pie'],
            &[data-chart-type='polarArea'],
            &[data-chart-type='radar'] {
                @apply aspect-square;
            }
        }
    }

    @supports not (container-type: inline-size) {
        & .fi-wi-chart-canvas-ctn:not(.fi-wi-chart-canvas-ctn-no-aspect-ratio) {
            @apply sm:aspect-[2];

            &[data-chart-type='doughnut'],
            &[data-chart-type='pie'],
            &[data-chart-type='polarArea'],
            &[data-chart-type='radar'] {
                @apply aspect-square;
            }
        }
    }

    & .fi-wi-chart-filter {
        &.fi-input-wrp {
            @apply w-max sm:-my-2;
        }

        &.fi-dropdown {
            & .fi-wi-chart-filter-content {
                @apply p-6;
            }
        }
    }

    & .fi-color {
        & .fi-wi-chart-bg-color {
            @apply text-color-50 dark:text-color-400/10;
        }

        & .fi-wi-chart-border-color {
            @apply text-color-500 dark:text-color-400;
        }
    }

    & .fi-wi-chart-bg-color {
        @apply text-gray-100 dark:text-gray-800;
    }

    & .fi-wi-chart-border-color {
        @apply text-gray-400;
    }

    & .fi-wi-chart-grid-color {
        @apply text-gray-200 dark:text-gray-800;
    }

    & .fi-wi-chart-text-color {
        @apply text-gray-500 dark:text-gray-400;
    }
}