@mixin icon($size){
    display: inline-block;
    width: $size;
    height: $size;

    svg {
        width: 100%;
        height: 100%;
    }
}


@mixin chart-edit($size){
    width: $size;
    height: $size;

    svg {
        width: 100%;
        height: 100%;

        circle{
            fill: #efefef;
        }

        .filled{
            fill: var(--color-orange-medium);
        }

        .verified{
            fill: var(--color-green);
        }
    }
}

@mixin fig-ratio($ratio){
    width: 100%;
    overflow: hidden;
    img{
        aspect-ratio: $ratio;
        width: 100%;
        object-fit: cover;
         border-radius: var(--radius-img);
    }
}

@mixin hide-scrollbar(){
    scrollbar-width: none;      
    -ms-overflow-style: none;  
    &::-webkit-scrollbar {
        display: none;             
    }

}


   @mixin title-bg($color){
            border-radius: var(--radius-small);
            background-color: var(--color-#{$color}-light);
            color: var(--color-#{$color});
            border: var(--w-border) solid var(--color-#{$color});
            padding: 5px 1.5ch;
            // font-family: var(--font-title);
            font-size: var(--fs-medium);
            font-weight: 700;
    }