@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins/_breakpoints";

// Colors
@function native-rgb($string, $opacity) {
  @return #{"rgb(#{$string} / #{$opacity})"};
}

$black: var(--wp--preset--color--black, #212529);
$gray: var(--ck-join-form-gray-color, --wp--preset--color--cyan-bluish-gray, #dfdcda);
$background: var(--ck-join-form-background-color, --wp--preset--color--base, #f4f1ee);

$primary: var(--ck-join-form-primary-color, --wp--preset--color--accent, #007bff);
$primary-focus: native-rgb(from $primary r g b, 0.6);
$danger: var(--wp--preset--color--accent-5, #e3220c);

$link-color: $primary;
$link-hover-color: $primary-focus;

// Fonts
$font-heading: var(--wp--preset--font-family--heading, sans-serif);
$font-regular: var(--wp--preset--font-family--body, sans-serif);

// Forms

$input-border-width: 2px;
$input-border-color: $black;
$input-border-radius: 0;
$input-focus-box-shadow: none;
$input-focus-border-color: $black;

// Buttons
$btn-font-weight: bold;
$btn-font-size: 28.43px;
$btn-link-hover-color: null;
$btn-padding-x: 24px;
$btn-padding-y: 8px;
$btn-border-radius: 0;
$btn-active-box-shadow: none;