@import "common-includes/functions";
@import "common-includes/variables";
.share-icon {
    color: $secondary;
    font-size: 17px !important;
    position: absolute;
    right: 15px;
    cursor: pointer;
.banner-share {
    background: #fff;
    border: #e8e8e8 1px solid;
    padding: 1px;
    position: absolute;
    left: -7px; 
    top: 50px;
    opacity: 0;
    visibility: hidden;
    transition-delay: 0.5s;
    transition: all 0.5s; 
    z-index: 100;
    a{
        font-size: 28px;
        display: block;
        margin: 2px;
        padding: 0;
        line-height: 1;
        span{
            display: inline-block;
            font-size: inherit;
            padding:0;
        }
    }
    &:before{
            width: 0; 
            height: 0; 
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            content:" ";
            border-bottom: 10px solid #fff;
            position: absolute;
            top: -8px;
            z-index: 10;
            right: 7px;
        }
        &:after{
            width: 0; 
            height: 0; 
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            content:" ";
            border-bottom: 10px solid #e8e8e8;
            position: absolute;
            top: -10px;
            right: 7px;
        }
        &.active {
            opacity: 1;
            visibility: visible;
            top: 32px; 
            transition-delay: 0.0s;
            transition: all 0.5s;    
        }
}

    @include media-breakpoint-up(lg) {
        &:hover{
            .banner-share {
                opacity: 1;
                visibility: visible;
                top: 35px; 
                transition-delay: 0.0s;
                transition: all 0.5s;    
            }
        }
    }
}
.rtl{
  .share-icon{
      right: auto;left:15px;
    }
}