/* Bubble Float Right */ @mixin bubble-float-right { display: inline-block; position: relative; transition-duration: $defaultDuration; transition-property: transform; @include hacks(); &:before { pointer-events: none; position: absolute; z-index: -1; top: calc(50% - #{$tipHeight}); right: 0; content: ''; border-style: solid; border-width: $tipHeight 0 $tipHeight $tipWidth; border-color: transparent transparent transparent $tipColour; transition-duration: $defaultDuration; transition-property: right; } &:hover { transform: translateX(-5px); } &:hover:before { right: -($tipWidth); } }