@use "../050-layout/basics/" as *;

$l-bar__gap--elements: $il-margin-small-horizontal;
$l-bar__gap--groups: $il-margin-xlarge-horizontal;
$l-bar__element__margin-bottom: $il-margin-xlarge-vertical; // this margin separates stacking elements on small screens

// bridge into CSS variables, so there is something to override locally without counter-styling
:root {
    --l-bar__gap--elements: #{$l-bar__gap--elements};
    --l-bar__gap--groups: #{$l-bar__gap--groups};
    --l-bar__element__margin-bottom: #{$l-bar__element__margin-bottom};
}

.l-bar__container {
    // MAY be used to wrap the element-bar and can be styled with padding, margin, background-color as desired
}

.l-bar__space-keeper,
.l-bar__group {
    // you MUST NOT add padding or margin and SHOULD NOT add any styling (e.g. background-color) in consumer code
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    // avoid nested elements breaking off
    .l-bar__group,
    .l-bar__element {
        flex-wrap: nowrap;
    }
}

// elements inside have a margin bottom to keep lines apart
// compensate this line gap so elementbar does not have a margin-bottom below
.l-bar__space-keeper:not(:empty) {
    margin-bottom: calc(-1 * var(--l-bar__element__margin-bottom)); // counteract element margin-bottom, so outer edge doesn't have a visible margin-bottom
    &.l-bar__space-keeper--space-between {
        justify-content: space-between;
    }
}

// bottom margin to separate lines
.l-bar__space-keeper > .l-bar__element,
.l-bar__group > .l-bar__element {
    margin-bottom: var(--l-bar__element__margin-bottom);
}

// gap between two elements
.l-bar__group > .l-bar__element,
.l-bar__space-keeper > .l-bar__element {
    margin-right: var(--l-bar__gap--elements);
    &:last-child {
        margin-right: 0;
    }
}

// gap between two groups
.l-bar__space-keeper > .l-bar__group,
.l-bar__group > .l-bar__group {
    margin-right: var(--l-bar__gap--groups);
    &:last-child {
        margin-right: 0;
    }
}