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

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

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

// ============================================================================
// Mixins
// ============================================================================

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

    // 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";
}

@mixin canvas--child {
    @include canvas;
    position: absolute;
    overflow: hidden;
}

@mixin particles-js {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    @include canvas;
    position: absolute;
    overflow: hidden;
    // background-color: $color_highlight;
}

@mixin canvas_color {
    // background-color: $color_highlight;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    overflow: hidden;
}

@mixin canvas_gradient {
    // background-color: $color_highlight;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    overflow: hidden;

    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%);
}