@mixin flex($column, $wrap, $content, $items) {
    display: flex;
    @if $column {
        flex-direction: column;
    }
    @if $wrap {
        flex-wrap: wrap;
    }
    justify-content: $content;
    align-items: $items;
}

@mixin position($type, $top, $right, $bottom, $left) {
    position: $type;
    top: $top;
    right: $right;
    bottom: $bottom;
    left: $left;
}
@mixin beTriangle() {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

@mixin widhHeight($width, $height) {
    width: $width;
    height: $height;
}
@mixin btn-color($r, $g, $b) {
    border: 1px solid rgb($r, $g, $b) !important;
    color: rgb($r, $g, $b) !important;
    background: rgba($r, $g, $b, 0) !important;

    &:hover {
        border: 1px solid rgb($r, $g, $b) !important;
        background: rgba($r, $g, $b, 1) !important;
        color: $white !important;
        img {
            filter: brightness(0%) invert(100%);
        }
    }
    &:focus {
        background: rgba($r, $g, $b, 1) !important;
        border: 1px solid rgb($r, $g, $b) !important;
        color: $white !important;
        img {
            filter: brightness(0%) invert(100%);
        }
        box-shadow: 0 0 0 3px rgba($r, $g, $b, 0.5);
    }
    &:active {
        border: 1px solid rgb($r, $g, $b) !important;
        background: rgba($r, $g, $b, 1) !important;
        color: $white !important;
        img {
            filter: brightness(0%) invert(100%);
        }
    }
}

@mixin scrollBar($width) {
    &::-webkit-scrollbar {
        width: $width;
        &-track {
            background: $gray;
            border-radius: 15px;
        }
        &-thumb {
            background-color: rgb(196, 196, 196);
            border-radius: 15px;
        }
    }
}
