Generated by SassMeister.com.

input.scss

$primary: #3b71ca !default;
$secondary: #9fa6b2 !default;
$success: #14a44d !default;
$danger: #dc4c64 !default;
$warning: #e4a11b !default;
$info: #54b4d3 !default;
$light: #fbfbfb !default;
$dark: #332d2d !default;
$white: #fff !default;

$btn-contextual-box-shadow: 0 4px 9px -4px !default;
$btn-contextual-box-shadow-state-first-part: 0 8px 9px -4px !default;
$btn-contextual-box-shadow-state-second-part: 0 4px 18px 0 !default;
$btn-secondary-hover-focus-bgc: shade-color(#e3ebf7, 3%) !default;
$btn-secondary-active-bgc: shade-color(#e3ebf7, 6%) !default;

$buttons: () !default;
$buttons: map-merge(
  (
    'ag-serwis': (
      'background-color': #BF4141,
      'text-color': $white,
      'shadow-color': #BF4141,
    ),
  ),
  $buttons
);

@each $color, $value in $buttons {
  .btn-#{$color} {
    background-color: map-get($value, background-color);
    color: map-get($value, text-color);
    box-shadow: $btn-contextual-box-shadow map-get($value, shadow-color);

    &:hover,
    &:focus,
    &.focus {
      background-color: darken(map-get($value, background-color), 5%);
      color: map-get($value, text-color);
      box-shadow: $btn-contextual-box-shadow-state-first-part
          rgba(map-get($value, shadow-color), 0.3),
        $btn-contextual-box-shadow-state-second-part rgba(map-get($value, shadow-color), 0.2);
    }

    &:active,
    &.active {
      box-shadow: $btn-contextual-box-shadow-state-first-part
          rgba(map-get($value, shadow-color), 0.3),
        $btn-contextual-box-shadow-state-second-part rgba(map-get($value, shadow-color), 0.2);

      &:focus {
        box-shadow: $btn-contextual-box-shadow-state-first-part
            rgba(map-get($value, shadow-color), 0.3),
          $btn-contextual-box-shadow-state-second-part rgba(map-get($value, shadow-color), 0.2);
      }
    }

    .btn-check:checked + &,
    .btn-check:active + &,
    &:active,
    &.active,
    .show > &.dropdown-toggle {
      background-color: darken(map-get($value, background-color), 10%);
      color: map-get($value, text-color);

      &:focus {
        box-shadow: $btn-contextual-box-shadow-state-first-part
            rgba(map-get($value, shadow-color), 0.3),
          $btn-contextual-box-shadow-state-second-part rgba(map-get($value, shadow-color), 0.2);
      }
    }

    &:disabled,
    &.disabled {
      background-color: map-get($value, background-color);
      color: map-get($value, text-color);
      box-shadow: $btn-contextual-box-shadow map-get($value, shadow-color);
    }

    .btn-check:focus + &,
    &:focus {
      box-shadow: $btn-contextual-box-shadow-state-first-part
          rgba(map-get($value, shadow-color), 0.3),
        $btn-contextual-box-shadow-state-second-part rgba(map-get($value, shadow-color), 0.2);
    }
  }
}

// Button variant
@mixin button-variant-mdb($background) {
  color: set-notification-text-color($background);
  background-color: $background;

  &:hover {
    color: set-notification-text-color($background);
    background-color: darken($background, 7.5%);
  }

  &:focus,
  &.focus {
    color: set-notification-text-color($background);
    background-color: darken($background, 7.5%);
  }

  .btn-check:checked + &,
  .btn-check:active + &,
  &:active,
  &.active,
  .show > &.dropdown-toggle {
    color: set-notification-text-color($background);
    background-color: darken($background, 20%);

    &:focus {
      box-shadow: $btn-focus-box-shadow;
    }
  }

  &:disabled,
  &.disabled {
    color: set-notification-text-color($background);
    background-color: $background;
  }
}

// Button variant outline
@mixin button-outline-variant-mdb($color) {
  color: $color;
  border-color: $color;

  &:hover {
    color: $color;
    background-color: rgba(0, 0, 0, 0.02);
  }

  &:focus,
  &.focus {
    color: $color;
    background-color: transparent;
  }

  &:active,
  &.active,
  &.dropdown-toggle.show {
    color: $color;
    background-color: transparent;

    &:focus {
      box-shadow: none;
    }
  }

  &:disabled,
  &.disabled {
    color: $color;
  }
}

// Button sizes
@mixin button-size-mdb(
  $padding-top,
  $padding-right,
  $padding-bottom,
  $padding-left,
  $font-size,
  $line-height
) {
  padding: $padding-top $padding-right $padding-bottom $padding-left;
  font-size: $font-size;
  line-height: $line-height;
}

// Button size variant outline
@mixin button-outline-size-mdb($padding-top, $padding-right, $padding-bottom, $padding-left) {
  padding: $padding-top $padding-right $padding-bottom $padding-left;
}

output.css

.btn-ag-serwis {
  background-color: #BF4141;
  color: #fff;
  box-shadow: 0 4px 9px -4px #BF4141;
}
.btn-ag-serwis:hover, .btn-ag-serwis:focus, .btn-ag-serwis.focus {
  background-color: #ac3a3a;
  color: #fff;
  box-shadow: 0 8px 9px -4px rgba(191, 65, 65, 0.3), 0 4px 18px 0 rgba(191, 65, 65, 0.2);
}
.btn-ag-serwis:active, .btn-ag-serwis.active {
  box-shadow: 0 8px 9px -4px rgba(191, 65, 65, 0.3), 0 4px 18px 0 rgba(191, 65, 65, 0.2);
}
.btn-ag-serwis:active:focus, .btn-ag-serwis.active:focus {
  box-shadow: 0 8px 9px -4px rgba(191, 65, 65, 0.3), 0 4px 18px 0 rgba(191, 65, 65, 0.2);
}
.btn-check:checked + .btn-ag-serwis, .btn-check:active + .btn-ag-serwis, .btn-ag-serwis:active, .btn-ag-serwis.active, .show > .btn-ag-serwis.dropdown-toggle {
  background-color: #993434;
  color: #fff;
}
.btn-check:checked + .btn-ag-serwis:focus, .btn-check:active + .btn-ag-serwis:focus, .btn-ag-serwis:active:focus, .btn-ag-serwis.active:focus, .show > .btn-ag-serwis.dropdown-toggle:focus {
  box-shadow: 0 8px 9px -4px rgba(191, 65, 65, 0.3), 0 4px 18px 0 rgba(191, 65, 65, 0.2);
}
.btn-ag-serwis:disabled, .btn-ag-serwis.disabled {
  background-color: #BF4141;
  color: #fff;
  box-shadow: 0 4px 9px -4px #BF4141;
}
.btn-check:focus + .btn-ag-serwis, .btn-ag-serwis:focus {
  box-shadow: 0 8px 9px -4px rgba(191, 65, 65, 0.3), 0 4px 18px 0 rgba(191, 65, 65, 0.2);
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}