@use '../../tools/reset';
@use '../../tools/responsive-properties';
@use 'theme';

.Stack {
    display: grid;

    @include reset.list();
}

.Stack--hasSpacing {
    @include responsive-properties.create-cascade(
        $property: 'gap',
        $input-custom-property-base-name: 'stack-spacing',
        $breakpoints: theme.$breakpoints,
        $fallback-value: theme.$default-spacing
    );
}

.Stack--hasSpacing.Stack--hasStartDivider,
.Stack--hasSpacing.Stack--hasEndDivider,
.Stack--hasSpacing.Stack--hasIntermediateDividers {
    gap: 0;
}

// stylelint-disable selector-max-universal -- Remove any margins from all direct descendants regardless of their type.
.Stack > * {
    margin-block: 0;
}

.Stack--hasIntermediateDividers > * {
    border-block-start: theme.$border;
}

.Stack--hasSpacing.Stack--hasStartDivider > *,
.Stack--hasSpacing.Stack--hasEndDivider > * {
    padding-block: calc(var(--stack-spacing-internal) / 2);
}

.Stack--hasSpacing.Stack--hasIntermediateDividers > * {
    padding-block: var(--stack-spacing-internal);
}
// stylelint-enable

.Stack--hasSpacing.Stack--hasStartDivider > :first-child,
.Stack--hasSpacing.Stack--hasEndDivider > :first-child,
.Stack--hasSpacing.Stack--hasIntermediateDividers > :first-child {
    padding-block-start: 0;
}

.Stack--hasSpacing.Stack--hasStartDivider > :last-child,
.Stack--hasSpacing.Stack--hasEndDivider > :last-child,
.Stack--hasSpacing.Stack--hasIntermediateDividers > :last-child {
    padding-block-end: 0;
}

.Stack--hasIntermediateDividers > :first-child {
    border-block-start: none;
}

.Stack--hasStartDivider > :first-child {
    border-block-start: theme.$border;
}

.Stack--hasEndDivider > :last-child {
    border-block-end: theme.$border;
}

.Stack--hasSpacing.Stack--hasStartDivider > :first-child {
    padding-block-start: var(--stack-spacing-internal);
}

.Stack--hasSpacing.Stack--hasEndDivider > :last-child {
    padding-block-end: var(--stack-spacing-internal);
}
