@import 'bulma/bulma';
@import '@enso-ui/themes/bulma/overrides';
@import '@app/sass/app';

@mixin auth-light {
    .auth-layout {
        background:
            radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.55), transparent 36%),
            radial-gradient(circle at 84% 14%, rgba(45, 49, 66, 0.06), transparent 28%),
            radial-gradient(circle at 78% 74%, rgba(45, 49, 66, 0.05), transparent 24%),
            linear-gradient(155deg, #e8edf8 0%, #eef2ff 45%, #dfe6f5 100%);

        &::before {
            background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 66%);
        }

        &::after {
            background: radial-gradient(circle, rgba(45, 49, 66, 0.06) 0%, rgba(45, 49, 66, 0) 68%);
        }
    }
}

@mixin auth-dark {
    .auth-layout {
        background:
            radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.02), transparent 36%),
            radial-gradient(circle at 84% 14%, rgba(52, 64, 82, 0.45), transparent 28%),
            radial-gradient(circle at 78% 74%, rgba(24, 30, 40, 0.5), transparent 24%),
            linear-gradient(155deg, #0f131a 0%, #131720 50%, #151922 100%);

        &::before {
            background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 66%);
        }

        &::after {
            background: radial-gradient(circle, rgba(52, 64, 82, 0.45) 0%, rgba(52, 64, 82, 0) 68%);
        }
    }
}

.auth-layout {
    position: relative;
    overflow: hidden;

    &::before,
    &::after {
        content: '';
        position: absolute;
        inset: auto;
        pointer-events: none;
        z-index: 0;
    }

    &::before {
        top: -12rem;
        left: -8rem;
        width: 34rem;
        height: 34rem;
        border-radius: 50%;
        filter: blur(14px);
    }

    &::after {
        right: -10rem;
        bottom: -10rem;
        width: 38rem;
        height: 38rem;
        border-radius: 50%;
        filter: blur(18px);
    }
}

[data-theme='light'],
:root:not([data-theme='dark']) {
    @include auth-light;
}

[data-theme='dark'] {
    @include auth-dark;
}

@media (prefers-color-scheme: light) {
    @include auth-light;
}

@media (prefers-color-scheme: dark) {
    @include auth-dark;
}

.auth-layout {
    .box {
        border: none;
    }
}