$close-icon-sm-width: 20px;
$close-icon-default-width: 30px;
$menu_icon_height : 4px;
$menu_icon_width: 30px;
$close-icon-sm-width: 20px;
$close-icon-default-width: 25px;

.#{$prefix}-post-format-icon{
    display: inline-block;
    padding: 1px 5px 1px 7px;
    @extend %primary-bg;
    position: absolute;
    bottom: 0;
    right: 0;
}

.#{$prefix}-close-icon{
    width: 50px;
    position: relative;
    display: inline-block;
    cursor: pointer;
    height: 100%;
    @include transition();
    &.#{$prefix}-close-icon-sm{
        width: $close-icon-sm-width;
        span{
            width: $close-icon-sm-width;
        }
    }
    span{
        display: block;
        position: absolute;
        width: $close-icon-default-width;
        height: 3px;
        z-index: 5;
        top: 50%;
        border-radius: 5px;
        @extend %primary-bg;
        transform :rotate(45deg);
        &:last-child{
            transform:rotate(135deg);
        }
      
    }
    
    &.#{$prefix}-close-icon-white{
        span{
            background-color: $color_white;
        }
    }
          
}  

.#{$prefix}-menu-icon{
    position: relative;
    height: 20px;
    width: $menu_icon_width;
    border-radius: 5px;
    cursor: pointer;
    @include transition;
    &:before{
        position: absolute;
        display: block;
        content: "";
        background-color: $color_black;
        height: $menu_icon_height;
        width: 100%;
        border-radius: 5px;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }
    span{
        &:before,
        &:after{
            position: absolute;
            display: block;
            content: "";
            background-color: $color_black;
            height: $menu_icon_height;
            width: 100%;
            border-radius: 5px;
            left: 0;
        }
        &:before{
            top: 1px;
    
        }
        &:after{
            bottom: 1px;
        }
    }

}

.#{$prefix}-plus-icon{
    width: 50px;
    position: relative;
    display: inline-block;
    cursor: pointer;
    height: 50px;
    &.#{$prefix}-close-icon-sm{
        width: $close-icon-sm-width;
        span{
            width: $close-icon-sm-width;
        }
    }
    span{
        display: block;
        position: absolute;
        width: $close-icon-default-width;
        height: 3px;
        z-index: 1;
        top: 50%;
        border-radius: 5px;
        @extend %primary-bg;
        transform :rotate(0deg);
        &:last-child{
            transform:rotate(90deg);
        }
    }
    &.#{$prefix}-close-icon-white{
        span{
            background-color: $color_white;
        }
    }
}