.blook-offcanvas-icon{
    background-color: $color_black;
    height: 35px;
    line-height: 35px;
    button{
        display: block;
        width: 35px;
        margin: auto;
        padding: 0;
        border: 0;
        background-color: transparent;
        cursor: pointer;
        border-radius: 0;
        height: 100%;
        text-align: center;
        &:hover,
        &:focus-within{
            .#{$prefix}-line-1{
                &:before{
                    left: initial;
                    right: 4px;
                }
            }
            .#{$prefix}-line-3{
                &:before{
                    left: 4px;
                    right: initial;
                }
            }
        }
        .#{$prefix}-line{
            display: block;
            position: relative;
            height: 4px;
            background-color: $color_white;
            margin-bottom: 5px;
            width: 100%;
            @include transition();
            &:before{
                content:'';
                display: block;
                width: 3px;
                height: 4px;
                background-color: $color_black;
                position: absolute;
                top: 0;
                @include transition();
            }
        }
        .#{$prefix}-line-1{
            &:before{
                left: 4px;
            }
        }
        .#{$prefix}-line-2{
            &:before{
                left: 50%;
                @include transform(translateX(-50%));
            }
        }
        .#{$prefix}-line-3{
            &:before{
                right: 4px;
            }
        }
    }
}

.blook-close-icon-style-1{
    padding: 0 15px;
    border: 0;
    cursor: pointer;
    height: 20px;
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    i{
        display: inline-block;
        padding-left: 5px;
    }
    &:hover{
        opacity: 0.63;
    }
}
.blook-close-icon-style-2{
    border: 0;
    border-radius: 100%;
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    &:hover{
        opacity: 0.8;
    }
}