// =Stack
.stack {
    --stack-divider-color: transparent;
    --stack-divider-style: solid;
    --stack-divider-size: 1px;

    & > * {
        position: relative;

        &:after {
            position: absolute;
            content: '';
            bottom: 0;
            left: 0;
            width: 100%;
            height: var(--stack-divider-size);
            border-bottom-color: var(--stack-divider-color);
            border-bottom-style: var(--stack-divider-style);
            border-bottom-width: var(--stack-divider-size);
        }
        &:last-child {
            margin-bottom: 0;
        }
        &:last-child:after {
            display: none;
        }
    }
}
.stack-dashed {
    --stack-divider-style: dashed;
}
.stack-dotted {
    --stack-divider-style: dotted;
}

// Size
$spacing-scale: scale(spacing);
@each $name, $index in $spacing-scale {
    .stack-#{$name} > * {
        margin-bottom: $unit * $index;
        &:after { bottom: -($unit * $index)/2; }
    }
}

// Divider Color
$borders-colors: map-get($colors, border);
@each $name, $value in $borders-colors {
    .stack-#{$name} {
        --stack-divider-color: #{$value};
    }
}
// Dark theme
@include dark-theme {
    $borders-colors: map-get($colors-dark, border);
    @each $name, $value in $borders-colors {
        .stack-#{$name} {
            --stack-divider-color: #{$value};
        }
    }
}