@use '../../colors';
@use '../../breakpoints';

$shadow-size:3px;

.bz-stroked-text-pink {
    position: relative;
    color: colors.$white;
    -webkit-text-stroke-width: 0.25em;
    -webkit-text-stroke-color: colors.$pink-100;
    paint-order: stroke fill;

    &:before {
        color: colors.$black;
        content: attr(data-text);
        -webkit-text-stroke-width: 0.25em;
        -webkit-text-stroke-color: colors.$black;
        opacity: 0.25;
        paint-order: stroke fill;
        position: absolute;
        inset: 0;
        font-size: inherit;
        z-index: -1;
        //width: calc(100% - 10px);
        white-space: pre-wrap;
        transform: translate(8px, 8px);
    }
}

.bz-stroked-text-blue {
    position: relative;
    color: colors.$white;
    -webkit-text-stroke-width: 16px;
    -webkit-text-stroke-color: colors.$blue-100;
    paint-order: stroke fill;

    &:before {
        color: colors.$black;
        content: attr(data-text);
        -webkit-text-stroke-width: 0.25em;
        -webkit-text-stroke-color: colors.$black;
        opacity: 0.25;
        paint-order: stroke fill;
        position: absolute;
        inset: 0;
        font-size: inherit;
        top: 0;
        left: 0;
        //transform: translate(-50%, -50%);
        z-index: -1;
        //width: 100%;
        transform: translate(8px, 8px);
    }
}


@media (max-width: breakpoints.$tablet) { 

    .bz-stroked-text-pink .bz-stroked-text-pink::before, .bz-stroked-text-blue, .bz-stroked-text-blue::before {
        -webkit-text-stroke-width: 12px;
    }
}