st-arrow-box {    
        .st-arrow-box {
            display: var(--st-arrow-box-display, block);
            position: relative;
            background: var(--st-arrow-box-background, #fff);
            border: var(--st-arrow-box-border, 2px solid #dcdcdc);
            border-color: var(--st-arrow-box-border-color, #dcdcdc);
            padding: var(--st-arrow-box-padding, 10px);
            margin: var(--st-arrow-box-margin, 0 0 10px 0);
            border-radius: var(--st-arrow-box-border-radius, 4px);
            text-align: var(--st-arrow-box-text-align,  left);
        }

        .st-arrow-box:after, .st-arrow-box:before {
            right: 100%;
            top: 50%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;            
        }        

        .st-arrow-box:after {
            border-color: rgba(255, 255, 255, 0);
            border-right-color: var(--st-arrow-box-background, #fff);
            border-width: 5px;
            margin-top: -5px;
        }
        .st-arrow-box:before {
            border-color: rgba(220, 220, 220, 0);
            border-right-color: var(--st-arrow-box-border-color, #dcdcdc);
            border-width: 8px;
            margin-top: -8px;
        }  

        .st-arrow-box-right {

            &:after {
                left: 100%;
                border-right-color: rgba(255, 255, 255, 0);
                border-left-color: var(--st-arrow-box-background, #fff);
                width: 1px;
            }
            &:before {
                left: 100%;
                border-right-color: rgba(255, 255, 255, 0);
                border-left-color: var(--st-arrow-box-border-color, #dcdcdc);
                width: 1px;
            }
        }
}