$layout-standard-padding: 8px;
$layout-extra-padding: 16px;
$layout-insane-padding: 64px;

$hud-deadzone-x: 32px;
$hud-deadzone-y: 16px;

.page
{
    &.header
    {
        padding: 12px 24px;
        background-color: rgba( black, 0.5 );
        backdrop-filter: $blur;
        position: relative;
        align-items: center;
        border-bottom: 1px solid $terror-color;

        .divider
        {
            width: 0.5px;
            height: 100%;
            background-image: linear-gradient( to top, rgba( white, 0 ), white, rgba( white, 0 ) );
            margin-right: 20px;
        }

        .title
        {
            font-size: 32px;
            text-shadow: 0px 3px 3px rgba( black, 0.5 );
        }
    }

    &.footer
    {
        border-top: 1px solid $terror-color;
        padding: 16px;
        backdrop-filter: $blur;
        position: relative;
        align-items: center;
    }
}

.layout
{
    &.padding
    {
        padding: $layout-standard-padding;
    }

    &.padding-x
    {
        padding-left: $layout-standard-padding;
        padding-right: $layout-standard-padding;
    }

    &.padding-extra
    {
        padding: $layout-extra-padding;
    }

    &.padding-extra-x
    {
        padding-left: $layout-extra-padding;
        padding-right: $layout-extra-padding;
    }

    &.padding-insane
    {
        padding: $layout-insane-padding;
    }

    &.padding-insane-x
    {
        padding-left: $layout-insane-padding;
        padding-right: $layout-insane-padding;
    }

    &.padding-insane-y
    {
        padding-top: $layout-insane-padding;
        padding-bottom: $layout-insane-padding;
    }

    &.with-scroll
    {
        overflow-x: hidden;
        overflow-y: scroll;
    }

    &.gap, &.with-gap
    {
        gap: 8px;
    }

    &.gap-insane, &.with-gap-insane
    {
        gap: 64px;
    }

    &.flex-grow, &.grow
    {
        flex-grow: 1;
    }

    &.row
    {
        flex-direction: row;
    }

    &.column
    {
        position: relative;
        flex-direction: column;
    }

    &.pointer-events
    {
        pointer-events: all;
    }

    &.wrap
    {
        flex-wrap: wrap;
    }

    &.color-borders
    {
        border-top: 1px solid $terror-color;
        border-bottom: 1px solid $terror-color;
    }

    &.color-border-right
    {
        border-right: 1px solid $terror-color;
    }
}

.flex
{
    display: flex;

    &.gap-xs
    {
        gap: 4px;
    }

    &.gap-sm
    {
        gap: 8px;
    }

    &.gap
    {
        gap: 16px;
    }

    &.gap-lg
    {
        gap: 32px;
    }

    &.flex-grow
    {
        flex-grow: 1;
    }

    &.row
    {
        flex-direction: row;
    }

    &.column
    {
        flex-direction: column;
    }

    &.center
    {
        align-items: center;
        justify-content: center;
    }

    &.column-reverse
    {
        flex-direction: column-reverse;
    }

    &.align-center
    {
        align-items: center;
    }

    &.justify-center
    {
        justify-content: center;
    }

    &.align-start
    {
        align-items: flex-start;
    }

    &.justify-start
    {
        justify-content: flex-start;
    }

    &.align-end
    {
        align-items: flex-end;
    }

    &.justify-end
    {
        justify-content: flex-end;
    }

    &.space-evenly
    {
        justify-content: space-evenly;
    }

    &.space-between
    {
        justify-content: space-between;
    }

    &.w-full
    {
        width: 100%;
    }

    &.h-full
    {
        height: 100%;
    }

    &.absolute
    {
        position: absolute;
    }

    &.inset-0
    {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
}

.square {
    width: 24px;
    height: 24px;

    background-position: center;
    background-size: cover;

    &.rounded {
        border-radius: 50%;
    }
}