.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-[1.5];
        }
    }

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

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

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

            & .fi-wi-chart-filter-content-actions-ctn {
                @apply flex gap-3;
            }
        }
    }

    & .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;
    }
}