@import "./default-variables";

/*
* Breakpoints
*/
$grid-breakpoints: (
	xs: 0,
	sm: 576px,
	md: 768px,
	lg: 992px,
	xl: 1200px,
	xxl: 1400px,
	xxxl: 1660px,
	"1920+": 1660px,
);

/*
* Header Dimensions
*/

$header-height-desktop-xl: 120px;
$header-height-desktop: 120px;
$header-height-tablet: 80px;
$header-height-mobile: 80px;

/*
*    Header Properties
*/

$logo-width-mobile: 150px;
$logo-width-tablet: 150px;
$logo-width-desktop: 299px;

$menu-wrapper-tablet: 558px;
$menu-wrapper-mobile: 100vw;

$text-menu-parent-size: 16px;
$text-menu-parent-color: #243c49;
$text-menu-parent-spacing: -0.32px;
$text-menu-parent-font-weight: 390;
$text-menu-transform: none;

$text-menu-child-color: #243c49;
$text-menu-child-size: 16px;
$text-menu-child-font-weight: 390;
$text-menu-child-spacing: -0.16px;

$active-menu-color: $ui-foreground-primary-text-body-text;
$active-menu-indicator: $ui-foreground-primary-text-body-text;

$bg-menu-child: rgba(255, 255, 255, 1);
$bg-menu-grandchild: #ffffff;

/* Selector */
$selector_color: var(--wp--preset--color--ui-foreground-primary-text-headings);

/*
* Accessibility
*/
$accesible-background: var(--wp--preset--color--ui-background-primary);

/*
* Inputs
*/
$input-border-radius: 2px;

/*
* Parapraph <p>
*/
$p-mb: 20px;

/*
*    Buttons Properties
*/

$cta_font_size: 14px;
$cta_font_weight: 600;
$cta_line_height: 1.3;
$cta_letter-spacing: 0%;
$cta_border_radius: 40px;
$cta_transform: none;
$cta_min_width: 135px;
$cta_min_height: 60px;
$cta_padding: 21px 28px;

/*
 * Primary Button
 */

$cta-primary-01-bg-color: $ui-button-primary-color-01;
$cta-primary-01-border-color: transparent;
$cta-primary-01-text-color: $ui-base-white;

$cta-primary-01-hover-bg-color: $ui-button-primary-hover;
$cta-primary-01-hover-border-color: transparent;
$cta-primary-01-hover-text-color: $ui-base-white;

$cta-primary-01-focus-bg-color: $ui-button-primary-color-01;
$cta-primary-01-focus-border-color: rgba($ui-button-primary-color-01, 0.5);
$cta-primary-01-focus-text-color: $ui-base-white;

//cta-primary-02

$cta-primary-02-bg-color: $ui-button-primary-color-02;
$cta-primary-02-border-color: transparent;
$cta-primary-02-text-color: $ui-base-white;

$cta-primary-02-hover-bg-color: $ui-button-primary-hover;
$cta-primary-02-hover-border-color: transparent;
$cta-primary-02-hover-text-color: $ui-base-white;

$cta-primary-02-focus-bg-color: $ui-button-primary-color-02;
$cta-primary-02-focus-border-color: rgba($ui-button-primary-color-02, 0.5);
$cta-primary-02-focus-text-color: $ui-base-white;

//cta-primary-03

$cta-primary-03-bg-color: $ui-button-primary-color-03;
$cta-primary-03-border-color: transparent;
$cta-primary-03-text-color: $ui-button-primary-color-01;

$cta-primary-03-hover-bg-color: $ui-button-primary-hover;
$cta-primary-03-hover-border-color: transparent;
$cta-primary-03-hover-text-color: $ui-base-white;

$cta-primary-03-focus-bg-color: $ui-button-primary-color-03;
$cta-primary-03-focus-border-color: rgba($ui-button-primary-color-03, 0.5);
$cta-primary-03-focus-text-color: $ui-button-primary-color-01;

//cta-primary-04

$cta-primary-04-bg-color: $ui-button-primary-color-04;
$cta-primary-04-border-color: transparent;
$cta-primary-04-text-color: $ui-base-white;

$cta-primary-04-hover-bg-color: $ui-button-primary-hover;
$cta-primary-04-hover-border-color: transparent;
$cta-primary-04-hover-text-color: $ui-base-white;

$cta-primary-04-focus-bg-color: $ui-button-primary-color-04;
$cta-primary-04-focus-border-color: rgba($ui-button-primary-color-04, 0.5);
$cta-primary-04-focus-text-color: $ui-base-white;

//cta-inverse-primary

$cta-inverse-primary-bg-color: $ui-base-white;
$cta-inverse-primary-border-color: transparent;
$cta-inverse-primary-text-color: $ui-foreground-primary-text-button_on-dark;

$cta-inverse-primary-hover-bg-color: $ui-button-on-dark-hover;
$cta-inverse-primary-hover-border-color: transparent;
$cta-inverse-primary-hover-text-color: $ui-foreground-primary-text-button_on-dark;

$cta-inverse-primary-focus-bg-color: $ui-base-white;
$cta-inverse-primary-focus-border-color: rgba($ui-base-white, 0.5);
$cta-inverse-primary-focus-text-color: $ui-foreground-primary-text-button_on-dark;

/*
 * Secondary Button
 */

$cta-secondary-bg-color: transparent;
$cta-secondary-border-color: $ui-button-secondary-color-01;
$cta-secondary-text-color: $ui-button-secondary-color-01;

$cta-secondary-hover-bg-color: transparent;
$cta-secondary-hover-border-color: $ui-button-secondary-hover;
$cta-secondary-hover-text-color: $ui-button-secondary-hover;

$cta-secondary-focus-bg-color: transparent;
$cta-secondary-focus-border-color: rgba($ui-button-primary-color-01, 0.5);
$cta-secondary-focus-text-color: $ui-foreground-primary-text-button_on-dark;

//cta-inverse-secondary

$cta-inverse-secondary-bg-color: transparent;
$cta-inverse-secondary-border-color: $ui-base-white;
$cta-inverse-secondary-text-color: $ui-base-white;

$cta-inverse-secondary-hover-bg-color: $ui-base-white;
$cta-inverse-secondary-hover-border-color: $ui-base-white;
$cta-inverse-secondary-hover-text-color: $ui-button-secondary-color-01;

$cta-inverse-secondary-focus-bg-color: transparent;
$cta-inverse-secondary-focus-border-color: rgba($ui-base-white, 0.5);
$cta-inverse-secondary-focus-text-color: $ui-base-white;

/*
 * Tertiary Button
 */

$cta-tertiary-bg-color: transparent;
$cta-tertiary-border-color: transparent;
$cta-tertiary-text-color: $ui-button-tertiary-color-01;

$cta-tertiary-hover-bg-color: transparent;
$cta-tertiary-hover-border-color: transparent;
$cta-tertiary-hover-text-color: $ui-button-tertiary-hover;

$cta-tertiary-focus-bg-color: transparent;
$cta-tertiary-focus-border-color: rgba($ui-button-tertiary-color-01, 0.5) ;
$cta-tertiary-focus-text-color: $ui-button-tertiary-color-01;

//cta-inverse-tertiary

$cta-inverse-tertiary-bg-color: transparent;
$cta-inverse-tertiary-border-color: transparent;
$cta-inverse-tertiary-text-color: $ui-base-white;

$cta-inverse-tertiary-hover-bg-color: transparent;
$cta-inverse-tertiary-hover-border-color: transparent;
$cta-inverse-tertiary-hover-text-color: $ui-base-white;

$cta-inverse-tertiary-focus-bg-color: transparent;
$cta-inverse-tertiary-focus-border-color: rgba($ui-base-white, 0.5);
$cta-inverse-tertiary-focus-text-color: $ui-base-white;

/*
 * Fourth Button
 */

$cta-fourth-bg-color: $ui-button-fourth-color-01;
$cta-fourth-border-color: transparent;
$cta-fourth-text-color: $ui-base-white;

$cta-fourth-hover-bg-color: $ui-button-fourth-hover;
$cta-fourth-hover-border-color: transparent;
$cta-fourth-hover-text-color: $ui-base-white;

$cta-fourth-focus-bg-color: $ui-button-fourth-color-01;
$cta-fourth-focus-border-color: rgba($ui-button-fourth-color-01, 0.5);
$cta-fourth-focus-text-color: $ui-base-white;

//cta-inverse-fourth

$cta-inverse-fourth-bg-color: $ui-base-white;
$cta-inverse-fourth-border-color: transparent;
$cta-inverse-fourth-text-color: $ui-foreground-primary-text-button_on-dark;

$cta-inverse-fourth-hover-bg-color: $ui-button-on-dark-hover;
$cta-inverse-fourth-hover-border-color: transparent;
$cta-inverse-fourth-hover-text-color: $ui-foreground-primary-text-button_on-dark;

$cta-inverse-fourth-focus-bg-color: $ui-base-white;
$cta-inverse-fourth-focus-border-color: rgba($ui-base-white, 0.5);
$cta-inverse-fourth-focus-text-color: $ui-foreground-primary-text-button_on-dark;