@use './screen' as screen;

@mixin h-spacing($size, $withLast: false) {
    @if $withLast {
        & > * {
            margin-right: $size;
        }
    } @else {
        & > *:not(:last-child) {
            margin-right: $size;
        }
    }
}

@mixin h-deep-spacing($size, $withLast: false) {
    @if $withLast {
        &::ng-deep > * {
            margin-right: $size;
        }
    } @else {
        &::ng-deep > *:not(:last-child) {
            margin-right: $size;
        }
    }
}

@mixin v-deep-spacing($size, $withLast: false) {
    @if $withLast {
        &::ng-deep > * {
            margin-bottom: $size;
        }
    } @else {
        &::ng-deep > *:not(:last-child) {
            margin-bottom: $size;
        }
    }
}

@mixin v-spacing($size, $withLast: false) {
    @if $withLast {
        & > * {
            margin-bottom: $size;
        }
    } @else {
        & > *:not(:last-child) {
            margin-bottom: $size;
        }
    }
}

@mixin gap($size) {
    // dont' remove, wip
    @supports (gap: $size) {
        gap: $size;
    }

    @supports not (gap: $size) {
        @include screen.mobile() {
            flex-direction: column;
            & > *:not(:last-child) {
                margin-bottom: $size;
            }
        }
        @include screen.gt-mobile() {
            & > *:not(:last-child) {
                margin-right: $size;
            }
        }
    }
}