/**
 * TODO: Migrated `data-shape` to be a global modifier w/ variables. So other
 * Components can add support. e.g. `Box`
 */

figure {
    &[data-fit="contain"] > * {
        @apply object-contain;
    }

    &[data-fit="cover"] > * {
        @apply object-cover;
    }

    &[data-fit="fill"] > * {
        @apply object-fill;
    }

    &[data-fit="none"] > * {
        @apply object-none;
    }

    &[data-fit="scale-down"] > * {
        @apply object-scale-down;
    }

    &[data-shape="pill"] > * {
        border-radius: var(--radius-pill) !important;
    }

    &[data-shape="rounded"] > * {
        border-radius: var(--radius-small) !important;
    }

    &:not([data-variation]) {
        &[data-size] > * {
            width: var(--size-embedded);
        }
    }

    &[data-variation~="icon"] {
        &[data-size] > * {
            width: var(--size-icon);
            height: var(--size-icon);
        }
    }
}