@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;
        font-size: inherit;
        margin-top: 4px;
        margin-left: 4px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
        width: 100%;
        display: block;
    }
}

.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;
        font-size: inherit;
        margin-top: 4px;
        margin-left: 4px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
        width: 100%;
    }
}

@media (max-width: 1124px) { 

    .bz-stroked-text-pink, .bz-stroked-text-blue {
        &:before {
            width: 98.6%;
        }
    }
}

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

    .bz-stroked-text-pink, .bz-stroked-text-blue {
        &:before {
            width: 96%;
        }
    }
}