@use '../../shared/full-width-image-aliases';
@forward '../../shared/full-width-image';

$sel: ":is(";
@each $alias in full-width-image-aliases.$aliases {
    @if ($sel != ":is(") { $sel: $sel + ", "; }
    $sel: $sel + "[data-callout='#{$alias}']";
}
$sel: $sel + ")";

.callout#{$sel} {
    --callout-padding: 0;
    --callout-content-padding: 0;
    --callout-border-width: 0;
    --callout-blend-mode: normal;

    --image-shadow-offset: 0;
    --p-spacing: 0;

    position: relative;


    .callout-content {
        font-size: 0;
    }

    img {
        height: var(--fwi-height);
        width: 100%;
        object-fit: cover;
    }

    .callout-icon {
        display: none;
    }

    .callout-title {
        background: none;
        position: absolute;
        justify-content: center;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);
        text-shadow: var(--fwi-title-shadow);
        z-index: 1;
    }

    &[data-callout-metadata~="blur"] .callout-content {
        filter: blur(var(--fwi-title-blur));
    }

    &[data-callout-metadata~="grayscale"] img {
        filter: grayscale(1);
    }
}
