chart-donut.less

.ffe-chart-donut {
    display: grid;
    width: fit-content;
    grid-template-columns: auto;
    grid-template-rows: auto;
    place-items: center;
    position: relative;
    text-align: left;

    &--first {
        stroke: var(--ffe-color-default-brand-primary-subtle);
    }

    &--last {
        stroke: var(--ffe-color-foreground-emphasis);
    }

    &__circle,
    &__description {
        grid-column: 1 e('/') 1;
        grid-row: 1 e('/') 1;
    }

    &__circle {
        width: 12.5rem;
        aspect-ratio: 1;
    }

    &__description {
        z-index: 1;
    }

    &__name {
        color: var(--ffe-color-foreground-emphasis);
        text-align: center;
    }

    &__fractions {
        display: grid;
        grid-template-columns: auto 1px auto;
        grid-template-rows: auto auto;
        grid-column-gap: var(--ffe-spacing-xs);

        &::after {
            grid-column: 2 e('/') 3;
            grid-row: 1 e('/') 2;
            display: flex;
            // Using subtle border color for the separator
            background: var(--ffe-color-border-primary-subtle);
            height: 1lh;
            content: '';
        }
    }

    &__fraction {
        display: grid;
        place-items: center;
    }

    .ffe-chart-donut__amount {
        color: var(--ffe-color-foreground-default);
    }

    &__fraction:first-of-type {
        grid-column: 1 e('/') 2;
        grid-row: 1 e('/') 3;
    }

    &__fraction:last-of-type {
        grid-column: 3 e('/') 4;
        grid-row: 1 e('/') 3;
    }
}