@import 'fonts';
@import 'colors';

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

// 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;
        }
    }
}

%link-reset{
    a{
        @extend %font-bodyStrong;
        text-decoration: none;
        color:$fu-primary-500;
        cursor: pointer;

        &:link,
        &:visited,
        &:hover,
        &:active{
            color:$fu-primary-500;
        }
    }
}

%no-pointer-events{
    pointer-events: none;
    cursor: default;
    touch-callout: none;
    user-select: none;
}

%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;
}

%image-masked{
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0C2 0 0 2 0 10s2 10 10 10 10-2 10-10S18 0 10 0Zm0 0' fill='%23a5a5a5'/%3E%3C/svg%3E");
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0C2 0 0 2 0 10s2 10 10 10 10-2 10-10S18 0 10 0Zm0 0' fill='%23a5a5a5'/%3E%3C/svg%3E");
    -webkit-mask-size: cover;
    mask-size: cover;
}


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

    /* background of the scrollbar except button or resizer */
    &::-webkit-scrollbar-track {
        background-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;
    }
}

// v3 empty state
%empty-state-background {
    background: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Ccircle cx='40' cy='40' r='40' fill='%23F1F3F4'/%3E%3Crect x='33.816' y='40.348' width='9.739' height='26.307' rx='4.87' transform='rotate(44.722 33.816 40.348)' fill='%2353575B'/%3E%3Ccircle transform='matrix(-1 0 0 1 43.13 36.87)' fill='%2353575B' r='20.174'/%3E%3Ccircle transform='matrix(-1 0 0 1 43.13 36.87)' fill='%23DDDFE1' r='15.304'/%3E%3C/svg%3E") center center no-repeat;
}