// -------------------------------------------------- //
// Smart columns
// -------------------------------------------------- //
@use 'sass:math';

.gds-smart-fill {
    display: block;
}

.gds-smart-fill__col {
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: 0.9375rem;
    padding-left: 0.9375rem;
    @include transition-back(all, 250ms);
}

.gds-smart-fill__col--animated {
    width: 0;
    @include transition-back(all, 250ms);
}

@for $i from 1 through 12 {
    $w: #{math.div(100, $i)}$percentage;

    .gds-smart-fill__col:first-child:nth-last-child(#{$i}),
    .gds-smart-fill__col:first-child:nth-last-child(#{$i}) ~ .gds-smart-fill__col {
        width: $w;
    }

    .gds-smart-fill__col--animated:first-child:nth-last-child(#{$i}),
    .gds-smart-fill__col--animated:first-child:nth-last-child(#{$i})
        ~ .gds-smart-fill__col--animated {
        width: 0;
    }

    .gds-smart-fill__col--open:first-child:nth-last-child(#{$i}),
    .gds-smart-fill__col--open:first-child:nth-last-child(#{$i}) ~ .gds-smart-fill__col--open {
        width: $w;
    }
}