// ============================================================================
// Imports
// ============================================================================

@use "../../variables" as *;
// @use '../../mixins' as *;

// ============================================================================
// Container | Canvas
// ============================================================================

@mixin canvas {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 0 0 0;
    min-width: 100%;
    min-height: 100%;
    z-index: 0;

    // Grid
    // grid-column: 1/-1;
    // grid-row: 1/-1;
    // grid-row-start: top_left;
    // grid-column-start: top_left;
    // grid-row-end: bottom_right;
    // grid-column-end: bottom_right;

    // pointer-events: none;

    // grid-template-areas:
    // "ribbon_left       ribbon_mid      ribbon_right";
}

.canvas {
    @include canvas;
}

.canvas > div {
    @include canvas;
    position: absolute;
}

#particles-js {
    min-width: 100%;
    min-height: 100%;
    height: 100%;
    @include canvas;
    position: absolute;
    // background-color: $color_highlight;
}

.canvas_color {
    // background-color: $color_highlight;
    min-width: 100vw;
    min-height: 100vh;
}

.canvas_gradient {
    // background-color: $color_highlight;
    min-width: 100vw;
    min-height: 100vh;

    color: hsla(0, 0%, 100%, 0.85);

    background-color: #170d24;
    background-image: radial-gradient(
            ellipse at 10% 90%,
            #0d1f7a 0%,
            transparent 55%
        ),
        radial-gradient(ellipse at 90% 90%, #439cc5 0%, transparent 55%),
        radial-gradient(ellipse at 90% 10%, #4a74dc 0%, transparent 55%),
        radial-gradient(ellipse at 10% 10%, #35244f 0%, transparent 55%);
    // background-image:
    //   radial-gradient(ellipse at 10% 90%, #3c2d83 0%, transparent 55%),
    //   radial-gradient(ellipse at 90% 90%, #c33c65 0%, transparent 55%),
    //   radial-gradient(ellipse at 90% 10%, #4a74dc 0%, transparent 55%),
    //   radial-gradient(ellipse at 10% 10%, #35244f 0%, transparent 55%);
}