@use '@/shared/styles/utils.module.scss' as utils;

$flex-map: (
    'vert': (
        flex-direction: column,
    ),
    'horz': (
        flex-direction: row,
    ),
);
@mixin flex($direction: 'vert') {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    gap: 0;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    @include utils.apply-style-map(
        $mixin-map: $flex-map,
        $mode: $direction
    );
}

$flex-hug-map: (
    'default': (
        width: fit-content,
        height: fit-content,
    ),
    'full-width': (
        width: 100%,
    ),
    'full-height': (
        height: 100%,
    ),
);
@mixin flex-hug($mode: 'default') {
    @include flex('horz');
    @include utils.apply-style-map(
        $mixin-map: $flex-hug-map,
        $mode: $mode
    );
}


$scroll-map: (
    'hidden': (
        "&::-webkit-scrollbar": (
            display: none
        ),
        -ms-overflow-style: none,  /* IE and Edge */
        scrollbar-width: none,  /* Firefox */
    ),
);
@mixin scroll-bar($mode: 'hidden') {
    @include utils.apply-style-map(
        $mixin-map: $scroll-map,
        $mode: $mode
    );
}