// Name:            Native Scroll Area
// Description:     Component to style native scroll
//
// Component:       `uk-native-scroll-area`
//
// ========================================================================

@use 'sass:map';
@use 'sass:meta';

@use '@broxus/react-uikit/styles/variables' as *;


// Variables
// ========================================================================

@use '../mixins' as *;


@mixin native-scroll-area-styles {
    /* ========================================================================
       Component: Native Scroll Area
     ========================================================================== */

    .#{$prefix}-native-scroll-area {
        overflow: hidden;
        @if map.has-key($mixins, 'hook-native-scroll-area') {
            @include meta.apply(map.get($mixins, 'hook-native-scroll-area'));
        }
    }

    .#{$prefix}-native-scroll-area .#{$prefix}-native-scroll-area-inner {
        margin-bottom: -30px;
        overflow: auto hidden;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 30px;
        -webkit-transform: translate3d(0, 0, 0);
        @if map.has-key($mixins, 'hook-native-scroll-area-inner') {
            @include meta.apply(map.get($mixins, 'hook-native-scroll-area-inner'));
        }

        &::-webkit-scrollbar {
            height: 0 !important;
            width: 0 !important;
        }
    }

    .#{$prefix}-native-scroll-area .#{$prefix}-native-scroll-area-inner.vertical {
        overflow: hidden auto;
        @if map.has-key($mixins, 'hook-native-scroll-area-vertical-inner') {
            @include meta.apply(map.get($mixins, 'hook-native-scroll-area-vertical-inner'));
        }
    }

    .#{$prefix}-native-scroll-area .#{$prefix}-native-scroll-area-inner.horizontal.vertical {
        overflow: auto;
    }

    .#{$prefix}-native-scroll-area .#{$prefix}-native-scroll-area-content {
        min-width: min-content;
        @if map.has-key($mixins, 'hook-native-scroll-area-content') {
            @include meta.apply(map.get($mixins, 'hook-native-scroll-area-content'));
        }
    }

    .#{$prefix}-native-scroll-area .#{$prefix}-native-scroll-area-content > * {
        flex-wrap: nowrap;
    }

    @content;
}

@mixin native-scroll-area-tokens {
    @content;
}