@use '../../utils' as *;

/*----------------------------------------*/
/*  4.22 live-class css
/*----------------------------------------*/


.bd-live-class{
    &-wrapper{
        &.style-one{
            .bd-section-paragraph{
                margin-bottom: 40px;
                max-width: 550px;
            }
            .bd-section-title{
                .has-live-text{
                    display: inline-block;
                    padding: 5px 15px;
                    position: relative;
                    z-index: 1;
                    color: var(--bd-theme-black);
                    font-size: 22px;
                    border: 1px solid var(--bd-border-primary);
                    line-height: 1;
                    border-radius: 6px;
                    padding-left: 40px;
                    text-transform: capitalize;
                    &::before{
                        position: absolute;
                        left: 15px;
                        top: 50%;
                        transform: translateY(-50%);
                        content: "";
                        background: var(--bd-danger);
                        width: 12px;
                        height: 12px;
                        border-radius: 50%;
                        margin-top: -6px;
                        animation: zoom 3s infinite;
                    }
                }
            }
        }
    }
    &-thumb-wrapper{
        &.style-one{
            .bd-live-class-thumb{
                margin: 0 30px 30px 50px;
                max-width: 450px;
                position: relative;
                z-index: 3;
                @media #{$md,$sm,$xs} {
                    max-width: 100%;
                    margin-left: 0;
                }
                &::before{
                    position: absolute;
                    content: "";
                    width: 100%;
                    height: 100%;
                    background: transparent;
                    border: 2px dashed var(--bd-primary);
                    right: -30px;
                    bottom: -30px;
                    border-radius: 6px;
                    z-index: -1;
                }
                img{
                    border-radius: 6px;
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
    &-shape{
        &-01{
            position: absolute;
            left: 50px;
            top: 50%;
            transform: translateY(-50%);
            max-width: 60px;
        }
        &-02{
            position: absolute;
            max-width: 60px;
            left: 40%;
            bottom: 22%;
        }
        &-03{
            position: absolute;
            max-width: 40px;
            right: 10%;
            top: 30px;
        }
    }
}