@use "./variable" as *;
// Create css Variables (helpers/_base.scss  file)
// Create Color (helpers/_base.scss  file)
$css-color-vars: (
  bs-primary: $primary-hex,
  l2-primary: $l2-primary-hex,
  l2-secondary: $l2-secondary-hex,
  l3-primary: $l3-primary-hex,
  l4-primary: $l4-primary-hex,
  l5-primary: $l5-primary-hex,
  l5-secondary: $l5-secondary-hex,
  l6-primary: $l6-primary-hex,
  l7-primary: $l7-primary-hex,
  l7-secondary: $l7-secondary-hex,
  l8-primary: $l8-primary-hex,
  l9-primary: $l9-primary-hex,
  l9-secondary: $l9-secondary-hex,
  l10-primary:$l10-primary-hex,
  l10-secondary: $l10-secondary-hex,
  body-color:$black,
  black-2:$black-2-hex,
  black-3:$black-3-hex,
  black-4:$black-4-hex,
  cream:$cream-hex,
  offwhite:$offwhite-hex,
);
// Create Other Variables (helpers/_base.scss  file)
$css-other-vars: (
  font-family-base:$font-family-base-main,
  font-family-heading:$font-family-heading-main,
  font-wight-heading:$font-weight-heading-main,
  font-dm-sans:$font-family-dm-sans
);

// Create Buttons Variables
$button-variation: (
  outline: (background: transparent,
    border-width: 2px,
    border-color: $black,
    hover: (background: $black,
      color: $white,
      border-color: $black,
    )),
  primary-l02: (background: $l2-primary-hex,
    color: #fff,
    border-color: $l2-primary-hex,
    fill: ()),
  secondary-l02: (background: $l2-secondary-hex,
    color: #fff,
    border-color: $black,
    fill:(fill-bg: $l2-primary-hex,
      fill-color: #fff,
      fill-border: $l2-primary-hex)),
  outline-l02: (background: transparent,
    color: $black,
    border-width: 2px,
    border-color: $black,
    fill: (fill-bg: $l2-primary-hex,
      fill-color: #fff,
      fill-border: $l2-primary-hex )),

  primary-l03: (background: $l3-primary-hex,
    color: $black,
    border-color: $black,
    border-width: 2px,
    shadow:(shadow-bg: $l3-primary-hex ),
  ),
  primary-l04: (background: $l4-primary-hex,
    color: $white,
    border-width: 2px,
    border-color: $black,
    shadow:(shadow-bg: $black,
      shadow-border: $black),
    hover:(color: $white,
    )),
  secondary-l04: (background: $cream,
    color: $black,
    border-width: 2px,
    border-color: $black,
    shadow:(shadow-bg: $black,
      shadow-border: $black),
    hover:(color: $black,
    )),
  primary-l05: (background: $l5-primary-hex,
    color: $black-3-hex,
    border-color: $l5-primary-hex,
    fill:(fill-border: #fff),
    hover:(background: $black,
      color: $white,
      border-color: $black,
    )),
  secondary-l05: (background: $l5-secondary-hex,
    color: #fff,
    border-color: $l5-secondary-hex,
    fill:(fill-border: #fff),
    hover:(background: $l5-primary-hex,
      color: $l5-secondary-hex,
      border-color: $l5-primary-hex,
    )),
  primary-l06: (background: $l6-primary-hex,
    color: $white,
    border-width: 2px,
    border-color: $l6-primary-hex),
  primary-l07: (background: $l7-primary-hex,
    color: $white,
    border-width: 2px,
    border-color: $l7-primary-hex,
    shadow:(shadow-bg: $l7-secondary-hex ),
    hover:(background: $l7-secondary-hex,
      color: $white,
      border-color: $l7-secondary-hex,
    )),

  primary-l08: (background: #fff,
    color: $black,
    border-width: 2px,
    border-color: $l8-primary-hex,
    fill:(fill-bg:$l8-primary-hex, fill-border: $black),
    hover:(background: $l7-primary-hex,
      color: $white,
      border-color: $l7-primary-hex,
    )),
  secondary-l08: (background: transparent,
    color: $black,
    border-width: 2px,
    border-color: $black,
    fill:(fill-bg:$l8-primary-hex, fill-border: $l8-primary-hex)),
  outline-l08: (background: transparent,
    color: #000,
    border-width: 2px,
    border-color: #000,
    fill:(fill-bg:$l8-primary-hex, fill-border: $l8-primary-hex),
    hover:(background: $l7-primary-hex,
      color: $white,
      border-color: $l7-primary-hex,
    )),
  primary-l09: (background: $l9-primary-hex,
    color: $l9-secondary-hex,
    border-color: $l9-primary-hex,
    fill:(fill-bg: $l9-secondary-hex,
      fill-color: $l9-primary-hex, )),
  secondary-l09: (background: $l9-secondary-hex,
    color: $l9-primary-hex,
    border-color: $l9-secondary-hex,
    fill:(fill-bg: $l9-secondary-hex,
      fill-color: $l9-primary-hex, )),
  primary-l10: (background: transparent,
    color: $l10-secondary-hex,
    border-width: 2px,
    border-color: $l10-primary-hex,
    fill: (fill-bg: $l10-primary-hex,
      fill-color: $l10-primary-hex,
    )),
  secondary-l10: (background: $l10-secondary-hex,
    color: $l10-secondary-hex,
    border-width: 2px,
    border-color: $l10-secondary-hex,
    fill: (fill-bg: $l10-primary-hex,
      fill-color: $l10-primary-hex,
    )),
  outline-l10: (background: transparent,
    color: $l10-primary-hex,
    border-width: 2px,
    border-color: $l10-primary-hex,
    fill: (fill-bg: #FFF4D9,
      fill-color: $l10-secondary-hex,
    )),
);