@use'../variables' as*;

// Background Gradient with grid pattern
.fui-bg-gradient{
    &-grid{
        @mixin grid-size-and-position {
            background-size: 90px 90px, 90px 90px, 15px 15px, 15px 15px, 1% 100% !important;
            background-position: 16px 16px, 16px 16px, 16px 16px, 16px 16px, 0px 0px !important;
        }
        &-dark{
            @include grid-size-and-position;
            background-image: linear-gradient(rgba(27, 37, 65, 0.4) 1px, transparent 1px), 
                            linear-gradient(90deg, rgba(27, 37, 65, 0.4) 1px, transparent 1px), 
                            linear-gradient(rgba(18, 28, 58, 0.75) 1px, transparent 1px), 
                            linear-gradient(90deg, rgba(18, 28, 58, 0.75) 1px, transparent 1px), 
                            linear-gradient(180deg, #081333 0%, #070D27 100%) !important;
            &:before{
                content: '';
                position: absolute;
                top:50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 100%;
                max-width: 1024px;
                height: 100%;
                border-radius: 50%;
                background-image: radial-gradient(64.5% 64.5% at 50% 50%, rgba(255, 255, 255, 0.20) 0%, rgba(7, 14, 41, 0.20) 69.72%);
                filter: blur(150px);
                pointer-events: none;
            }
            &:after{
                content: '';
                position: absolute;
                bottom:10%;
                left: 50%;
                transform: translateX(-50%);
                width: 100%;
                height: 270px;
                background-image: radial-gradient(64.5% 64.5% at 50% 50%, rgba(255, 255, 255, 0.75) 0%, rgba(7, 14, 41, 0.75) 69.72%);
                opacity: 0.2;
                filter: blur(150px);
                pointer-events: none;
            }
        }
        &-light{
            @include grid-size-and-position;
            background-image: linear-gradient(rgba(0, 0, 0, .15) 1px, transparent 1px), 
                              linear-gradient(90deg, rgba(0, 0, 0, .15) 1px, transparent 1px), 
                              linear-gradient(rgba(0, 0, 0, .1) 1px, transparent 1px), 
                              linear-gradient(90deg, rgba(0, 0, 0, .1) 1px, transparent 1px), 
                              linear-gradient(180deg, #fff 0%, #fff 100%) !important;
        }
    }
}


// Background Attachment
.fui-bg-attachment-fixed{
    background-attachment: fixed !important;
}
.fui-bg-attachment-local{
    background-attachment: local !important;
}
.fui-bg-attachment-scroll{
    background-attachment: scroll !important;
}

// Background Origin
.fui-bg-origin-border{
    background-origin: border-box !important;
}
.fui-bg-origin-padding{
    background-origin: padding-box !important;
}
.fui-bg-origin-content{
    background-origin: content-box !important;
}

// Background Position
.fui-bg-bottom{
    background-position: bottom !important;
}
.fui-bg-center{
    background-position: center !important;
}
.fui-bg-left{
    background-position: left !important;
}
.fui-bg-left-bottom{
    background-position: left bottom !important;
}
.fui-bg-left-top{
    background-position: left top !important;
}
.fui-bg-right{
    background-position: right !important;
}
.fui-bg-right-bottom{
    background-position: right bottom !important;
}
.fui-bg-right-top{
    background-position: right top !important;
}
.fui-bg-top{
    background-position: top !important;
}

// Background Repeat
.fui-bg-repeat{
    background-repeat: repeat !important;
}
.fui-bg-no-repeat{
    background-repeat: no-repeat !important;
}
.fui-bg-repeat-x{
    background-repeat: repeat-x !important;
}
.fui-bg-repeat-y{
    background-repeat: repeat-y !important;
}
.fui-bg-repeat-round{
    background-repeat: round !important;
}
.fui-bg-repeat-space{
    background-repeat: space !important;
}

// Background Size
.fui-bg-size-auto{
    background-size: auto !important;
}
.fui-bg-size-cover{
    background-size: cover !important;
}
.fui-bg-size-contain{
    background-size: contain !important;
}