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

.bz-post-it {
    position: relative;
    clip-path: polygon(0 0, calc(100% - 120px) 0, 100% 100px, 100% 100%, 0 100%);

    &::before {
        position: absolute;
        content: "";
        top: -6px; 
        right: -6px; 
        width: 120px;
        height: 100px;
        z-index: 1;
        background-image: url(../../assets/img/canto-dobrado.svg);
    }
    &--rotate {
        transform: rotate(4deg); 
    }
    &--hover {
        margin-left: -20px;
    }
}

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

    .bz-post-it {
        &--hover {
            margin-left: 20px;
            margin-top: -5px;
        }
    }
}