Generated by SassMeister.com.

input.scss

/// # Button Pattern
/// @group buttons

input[type='button'],
input[type='submit'],
.wp-block-search__button {
	border: var(--border-small) solid var(--wp--preset--color--contrast);
	border-radius: 0;
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	cursor: pointer;
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--font-weight--regular);
	padding: var(--shim) var(--gutter);
	text-decoration: none;
	white-space: normal;
	width: auto;
}

// Button - Fill
// -------------

input[type='button'],
input[type='submit'],
.wp-block-search__button {
	border: var(--border-small) solid var(--wp--preset--color--contrast);
	border-radius: 0;
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	cursor: pointer;
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--font-weight--regular);
	padding: var(--shim) var(--gutter);
	text-decoration: none;
	white-space: normal;
	width: auto;
}

// Button - Fill
// -------------

.wp-block-button {
  .wp-element-button {
    background-color: var(--btn-bg, var(--wp--preset--color--contrast));
    border: 1px solid var(--btn-border, var(--wp--preset--color--contrast));
    color: var(--btn-color, var(--wp--preset--color--base));
  }

  // &.is-style-fill {
  //   --btn-bg: var(--wp--preset--color--contrast);
  //   --btn-border: var(--wp--preset--color--contrast);
  //   --btn-color: var(--wp--preset--color--base);
  // }

  &.is-style-fill-base {
    --btn-bg: var(--wp--preset--color--base);
    --btn-border: var(--wp--preset--color--contrast);
    --btn-color: var(--wp--preset--color--contrast);
  }

  // Button - Outline
  // ----------------
  &.is-style-outline {
    --btn-bg: transparent;
    --btn-border: var(--wp--preset--color--contrast);
    --btn-color: var(--wp--preset--color--contrast);
  }

  &.is-style-outline-base {
    --btn-bg: transparent;
    --btn-border: var(--wp--preset--color--base);
    --btn-color: var(--wp--preset--color--base);
  }
}

body {
 --wp--preset--color--base: white;
                --wp--preset--color--contrast: black;
                --wp--preset--color--primary: #990099;
                --wp--preset--color--secondary: #0066ff;
                --wp--preset--color--tertiary: #009999;
}

.wp-block-buttons:last-child {
    background: #000;
}

$scale: (
'gutter': 1rem, // 16
'gutter-quarter': calc(var(--gutter) * 0.25), // 4
'gutter-half': calc(var(--gutter) * 0.5), // 8
'gutter-minus': calc(var(--gutter) * 0.75), // 12
'gutter-plus': calc(var(--gutter) * 1.5),
'gutter-double': calc(var(--gutter) * 2),
'gutter-triple': calc(var(--gutter) * 3)
);

// Loops through and returns all tokens from above files as CSS variables.
@mixin tokens($map, $prefix: null) {
  @each $tokenname, $tokenvalue in $map {
    --#{$prefix}#{$tokenname}: #{$tokenvalue};
  }
}


html {
  @include tokens($scale);
  font-size: var(--gutter);
  margin: 0;
}

.wp-block-buttons {
    border-width: calc(var(--gutter) * 1);
    border-style: solid;
    border-color: red;
    
    margin: var(--gutter) 0 0 calc(var(--gutter) * -1);
}

markup.html

<div class="is-layout-flex wp-block-buttons">
<div class="wp-block-button is-style-fill"><a class="wp-block-button__link wp-element-button">Fill</a></div>
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button">Outline</a></div>
</div>
<div class="is-layout-flex wp-block-buttons">
<div class="wp-block-button is-style-fill-base"><a class="wp-block-button__link wp-element-button" href="#">Fill Base</a></div>
<div class="wp-block-button is-style-outline-base"><a class="wp-block-button__link wp-element-button">Outline Base</a></div>
</div>

output.css

input[type=button],
input[type=submit],
.wp-block-search__button {
  border: var(--border-small) solid var(--wp--preset--color--contrast);
  border-radius: 0;
  background-color: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
  cursor: pointer;
  font-size: var(--wp--preset--font-size--small);
  font-weight: var(--wp--custom--font-weight--regular);
  padding: var(--shim) var(--gutter);
  text-decoration: none;
  white-space: normal;
  width: auto;
}

input[type=button],
input[type=submit],
.wp-block-search__button {
  border: var(--border-small) solid var(--wp--preset--color--contrast);
  border-radius: 0;
  background-color: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
  cursor: pointer;
  font-size: var(--wp--preset--font-size--small);
  font-weight: var(--wp--custom--font-weight--regular);
  padding: var(--shim) var(--gutter);
  text-decoration: none;
  white-space: normal;
  width: auto;
}

.wp-block-button .wp-element-button {
  background-color: var(--btn-bg, var(--wp--preset--color--contrast));
  border: 1px solid var(--btn-border, var(--wp--preset--color--contrast));
  color: var(--btn-color, var(--wp--preset--color--base));
}
.wp-block-button.is-style-fill-base {
  --btn-bg: var(--wp--preset--color--base);
  --btn-border: var(--wp--preset--color--contrast);
  --btn-color: var(--wp--preset--color--contrast);
}
.wp-block-button.is-style-outline {
  --btn-bg: transparent;
  --btn-border: var(--wp--preset--color--contrast);
  --btn-color: var(--wp--preset--color--contrast);
}
.wp-block-button.is-style-outline-base {
  --btn-bg: transparent;
  --btn-border: var(--wp--preset--color--base);
  --btn-color: var(--wp--preset--color--base);
}

body {
  --wp--preset--color--base: white;
  --wp--preset--color--contrast: black;
  --wp--preset--color--primary: #990099;
  --wp--preset--color--secondary: #0066ff;
  --wp--preset--color--tertiary: #009999;
}

.wp-block-buttons:last-child {
  background: #000;
}

html {
  --gutter: 1rem;
  --gutter-quarter: calc(var(--gutter) * 0.25);
  --gutter-half: calc(var(--gutter) * 0.5);
  --gutter-minus: calc(var(--gutter) * 0.75);
  --gutter-plus: calc(var(--gutter) * 1.5);
  --gutter-double: calc(var(--gutter) * 2);
  --gutter-triple: calc(var(--gutter) * 3);
  font-size: var(--gutter);
  margin: 0;
}

.wp-block-buttons {
  border-width: calc(var(--gutter) * 1);
  border-style: solid;
  border-color: red;
  margin: var(--gutter) 0 0 calc(var(--gutter) * -1);
}

settings.json

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