@mixin button-social-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
    padding: $padding-y $padding-x;
    font-size: $font-size;
    line-height: $line-height;
    border: 0;
    @include border-radius($border-radius);

    &::before {
        width: ($padding-y * 2) + ($font-size * $line-height);
        height: ($padding-y * 2) + ($font-size * $line-height);
        padding: $padding-y 0;
        font-size: $font-size;
        line-height: $line-height;
        @include border-radius($border-radius);
    }

    span {
        margin-left: ($padding-y * 2) + ($font-size * $line-height);
    }

    &.icon {
        width: ($padding-y * 2) + ($font-size * $line-height);
        height: ($padding-y * 2) + ($font-size * $line-height);
    }
}

@mixin avatar($width, $status-width) {
    position: relative;
    display: inline-block;
    width: $width;

    .img-avatar {
        width: $width;
        height: $width;
    }

    .avatar-status {
        position: absolute;
        right: 0;
        bottom: 0;
        display: block;
        width: $status-width;
        height: $status-width;
        border: 1px solid #fff;
        border-radius: 50em;
    }
}

@mixin borders($borders) {
    @each $border in $borders {
        $direction: nth($border, 1);
        @if $direction == "all" {
            $size: map-get(map-get($borders, $direction), size);
            $style: map-get(map-get($borders, $direction), style);
            $color: map-get(map-get($borders, $direction), color);
            border: $size $style $color;
        } @else if $direction == "top" {
            $size: map-get(map-get($borders, $direction), size);
            $style: map-get(map-get($borders, $direction), style);
            $color: map-get(map-get($borders, $direction), color);
            border-top: $size $style $color;
        } @else if $direction == "right" {
            $size: map-get(map-get($borders, $direction), size);
            $style: map-get(map-get($borders, $direction), style);
            $color: map-get(map-get($borders, $direction), color);
            border-right: $size $style $color;
        } @else if $direction == "bottom" {
            $size: map-get(map-get($borders, $direction), size);
            $style: map-get(map-get($borders, $direction), style);
            $color: map-get(map-get($borders, $direction), color);
            border-bottom: $size $style $color;
        } @else if $direction == "left" {
            $size: map-get(map-get($borders, $direction), size);
            $style: map-get(map-get($borders, $direction), style);
            $color: map-get(map-get($borders, $direction), color);
            border-left: $size $style $color;
        }
    }
}

@mixin sidebar-width($borders, $width) {
    $sidebar-width: $width;

    @each $border in $borders {
        $direction: nth($border, 1);
        @if $direction == "all" {
            $size: map-get(map-get($borders, $direction), size);
            $sidebar-width: ($sidebar-width - (2 * $size));
        } @else if $direction == "right" {
            $size: map-get(map-get($borders, $direction), size);
            $sidebar-width: $sidebar-width - $size;
        } @else if $direction == "left" {
            $size: map-get(map-get($borders, $direction), size);
            $sidebar-width: $sidebar-width - $size;
        }
        width: $sidebar-width;
    }
}

@mixin bg-variant($parent, $color) {
    #{"" + $parent} {
        @include border-radius(
            $card-border-radius-inner $card-border-radius-inner $card-border-radius-inner $card-border-radius-inner
        );
        color: #fff !important;
        background-color: $color !important;
    }
    a#{"" + $parent} {
        @include hover-focus {
            background-color: darken($color, 10%);
        }
    }
}

@mixin card-accent-variant($color) {
    border-top-width: 2px;
    border-top-color: $color;
}

@mixin tabs-style($color) {
    display: inline-block;
    margin-right: 20px;
    font-size: 16px;
    color: $color;
}

@mixin fit-content() {
    width: fit-content !important;
    width: -moz-max-content !important;
}

@mixin fit-content-height() {
    height: fit-content !important;
    height: -moz-max-content !important;
}

@mixin label($fontSize, $fontWeight, $fontStyle, $letterSpacing, $color) {
    font-family: Roboto;
    font-size: $fontSize;
    font-weight: normal;
    font-stretch: normal;
    font-style: $fontStyle;
    line-height: normal;
    letter-spacing: $letterSpacing;
    color: $color;
}

@mixin modal-btn($background-color) {
    width: 100%;
    background-color: $background-color;
    color: white;
    border-radius: initial;
}

@mixin OrderListingTableStyling {
    width: 100%;
    tr {
        border: 1px solid #d4d4d4;
        border-top: none;
        th {
            color: #4a4a4a;
            font-size: 11px;
            font-weight: 500;
            letter-spacing: 0.3px;
            vertical-align: middle;
            text-align: left;
            // position: sticky;
            // // z-index: 101 !important;
            // top: 0px;
            padding: unset;
            height: 30px;
            // line-height: 30px;
            border-top: 1px solid #d4d4d4;
        }
        &.header-row th {
            background-color: #ededed;
        }
        td {
            font-size: 12px;
            padding: 2px 0px 3px;
            vertical-align: middle;
            text-align: left;
            color: #000000;
            letter-spacing: 0px;
        }
    }
}