//===========================
// Fill Containers
//---------------------------
// A fill will stretch to fill the space, but will not be compressed.
//===========================
// Area to be filled by child
@mixin container-fill {
    align-items: stretch;
    display: flex;
    // flex-direction: row;
    // flex-wrap: nowrap;
    justify-content: center;
}

// Stacked and stretch to fill y-axis and x-axis
@mixin container-fill-y {
    @include container-fill;

    align-items: stretch;
    flex-direction: column;
}

// Stretch to fill x-axis and center vertically
@mixin container-fill-x-center {
    @include container-fill;

    align-items: center;
}

// Stacked tretch to fill y-axis and center horizontally
@mixin container-fill-y-center {
    @include container-fill;

    align-items: center;
    flex-direction: column;
}

// Child of .container-fill to fill.
@mixin fill {
    flex: 1 1 0%;
}

@mixin fill-scroll {
    flex: 1 1 0;
    overflow: auto;
}