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

.bz-hilight {
    position: relative;
    display: inline-block;
    margin-bottom: 30px;
    white-space: nowrap;

    &::after {
        position: absolute;
        content: "";
        bottom: -6px;
        height: 6px;
        right: 0; 
        left: 0;
        clip-path: polygon( 41.622% 27.483%,53.393% 5.895%,68.486% 20.781%,99.489% 0.008%,99.544% 66.656%,68.473% 87.475%,53.428% 72.636%,41.67% 94.2%,0.519% 66.657%,0.574% 0.008%,41.622% 27.483% );
        background-color: colors.$yellow-dark;
        z-index: -1;
    }
    .bz-hilight-hint {
        position: absolute;
        content: "";
        bottom: -110px;
        left: 75%;
        white-space: nowrap;
    }
}
@media (max-width: breakpoints.$desktop) {
    .bz-hilight {
        .bz-hilight-hint {
            left: 35%;
        }
    }
}

@media (max-width: breakpoints.$tablet) {
    .bz-hilight {
        .bz-hilight-hint {
            right: -50px;
            bottom: -50px;
            left: auto;
        }
    }
}