@mixin bar($height: auto, $gap: 0, $padding: 0) {
    display:            grid;
    //grid-template-columns: max-content 1fr;
    grid-template-rows: $height;
    grid-auto-flow:     column;
    grid-auto-columns:  max-content;
    grid-gap:           $gap;
    justify-content:    space-between;
    justify-items:      stretch;
    align-content:      center;
    align-items:        center;

    > * {
        display:     grid;
        align-items: center;
    }

    > .head,
    > :first-child {
        justify-content: start;
        justify-items:   start;
        justify-self:    start;
        padding-left:    $padding;
    }

    > .body,
    > :not(:first-child):not(:last-child) {
        justify-content: center;
        justify-items:   center;
        justify-self:    stretch;
    }

    > .foot,
    > :last-child:not(:first-child) {
        justify-content: end;
        justify-items:   end;
        justify-self:    end;
        padding-right:   $padding;
    }
}