x-hbox {
    display: flex;
    flex-direction: row;
    gap: var(--gap-box);
}

x-vbox {
    display: flex;
    flex-direction: column;
    gap: var(--gap-box);
}

x-hbox.homogenous > *, x-hbox.homogenous > * {
    flex: 1;
}

x-hbox.wrap, x-vbox.wrap {
    flex-wrap: wrap;
}

x-rows {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--preferred-width), 1fr));
    gap: var(--gap-box);
}

x-buttonbox {
    display: flex;
    flex-flow: row wrap;
    gap: var(--gap-buttonbox);
}

x-buttonbox.buttonbox-right {
    justify-content: flex-end;
}

x-buttonbox :is(button, .button, input[type="button"], input[type="submit"]) {
    margin: 0;
}

:is(x-hbox, x-vbox, x-buttonbox, x-rows).nopad {
    gap: 0;
}

x-frame {
    max-width: var(--width, 100%);
    width: min(var(--width), 100%);
    min-height: var(--height, 100%);
    max-height: var(--height, 100%);
    height: min(var(--height), 100%);
    padding: var(--padding, 0);
    margin: var(--margin, 0 auto);
    display: block;
}