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

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

.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;
    }

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

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

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

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

    &.row {
        flex-direction: row;
    }

    &.column {
        flex-direction: column;
    }

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

.flex {
    display: flex;

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

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

    &.gap {
        gap: 16px;
    }

    &.wrap {
        flex-wrap: wrap;
    }

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

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

    &.row {
        flex-direction: row;
    }

    &.column {
        flex-direction: column;
    }

    &.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%;
    }
}