@import 'fonts';
@import 'colors';
@import 'screen';
@import "shadows";
@import "border-radius";
@import "spacings";

%border-box-normalize {
    * {box-sizing: border-box;}
}

// region resets
%reset {
    @extend %border-box-normalize; // add box-sizing
    margin: 0;
    padding: 0;
    vertical-align: initial;
    text-align: initial;
}

%list-reset {
    ul, ol {
        padding: 0;
        margin: 0;
        li {
            list-style: none;
        }
    }
}
// endregion

%truncate{
    width: 100%;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

%truncate-flex-child{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


// scroll
$scrollBarColor: rgba(83, 87, 91, 0.3);
%customScroll{
    /* total width */
    &::-webkit-scrollbar {
        background-color: var(--fu-custom-scroll-bg-color, #fff);
        width: 12px;
    }

    /* background of the scrollbar except button or resizer */
    &::-webkit-scrollbar-track {
        background-color:  var(--fu-custom-scroll-bg-color, #fff);
    }

    /* scrollbar itself */
    &::-webkit-scrollbar-thumb {
        background-color: $scrollBarColor;
        border-radius: 13px;
        border: 4px solid #fff;
    }

    /* set button(top and bottom of the scrollbar) */
    &::-webkit-scrollbar-button {
        display:none;
    }
}

%customNavBarScroll{
    /* total width */
    &::-webkit-scrollbar {
        background-color: transparent;
        border-left: var(--fu-scroll-border, solid 0px transparent);
        border-top: var(--fu-scroll-border, solid 0px transparent);
        width: var(--fu-scroll-width, 4px);
        height: var(--fu-scroll-width, 4px);
    }

    /* background of the scrollbar except button or resizer */
    &::-webkit-scrollbar-track {
        background-color: var(--fu-scroll-bg-color, transparent);
    }

    /* scrollbar itself */
    &::-webkit-scrollbar-thumb {
        background-color: var(--fu-scroll-button-bg-color, $scrollBarColor);
        border-radius: var(--fu-scroll-button-border-radius, 4px);
    }
    /* set button(top and bottom of the scrollbar) */
    &::-webkit-scrollbar-button {
        display:none;
    }
}

%cloudUiScroll {
    &::-webkit-scrollbar, & *::-webkit-scrollbar {
        background-color: rgba(0, 0, 0, 0.024);
        width: 8px;
        border-radius: 8px;
    }
    &::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb {
        border-radius: 8px;
        background-color: rgb(187, 187, 187);
        min-height: 24px;
    }
    &::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover{
        background-color: rgb(128, 128, 128);
    }
    &::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner {
        background-color: rgb(255, 255, 255);
    }
}