// Vartheme custom variables
// -----------------------------------------------------------------------------

@import "../node_modules/bootstrap/scss/functions";      // Bootstrap functions.
@import "../node_modules/bootstrap/scss/mixins";         // Bootstrap mixins.
@import "../node_modules/bootstrap/scss/variables";      // Bootstrap variables.
@import "../node_modules/bootstrap/scss/variables-dark"; // Bootstrap variables dark.

// Card's default card-title font size.
$card-xlarge-title-font-size: 2.5rem;
$card-large-title-font-size: 2.5rem;
$card-medium-title-font-size: 1.875rem;
$card-small-title-font-size: 1.5rem;
$card-xsmall-title-font-size: 1.25rem;

// Overlay Card default styles.
$overlay-card-title-color: $white;
$overlay-card-xlarge-title-font-size: 4rem;
$overlay-card-content-color: $white;
$overlay-card-content-stop1-location: 65%;
$overlay-card-content-stop1-color: transparent;
$overlay-card-content-stop2-location: 105%;
$overlay-card-content-stop2-color: $black;
$overlay-card-content-hover-opacity: 0.9;

// Hero Card default styles.
$hero-card-title-color: $white;
$hero-card-xlarge-title-font-size: 3rem;
$hero-card-content-hover-opacity: 0.7;
$hero-card-content-background-color1: rgb(0,0,0);
$hero-card-content-background-color2: rgba(0,0,0,0.7);

// -----------------------------------------------------------------------------
// Custom Varbase Media Hero Slider variables for Vartheme.
// -----------------------------------------------------------------------------

// Text color.
$hero-title-text-color: $white;
$hero-brief-text-color: $white;
$hero-link-text-color: $white;

// Font sizes with responsive sizes.
$hero-xlarge-title-font-size-xs: 3.3rem;
$hero-xlarge-title-font-size-sm: 3.3rem;
$hero-xlarge-title-font-size-md: 57px;
$hero-xlarge-title-font-size-lg: 57px;
$hero-xlarge-title-font-size-xl: 57px;

// Hero content style.
$hero-content-hover-opacity: 0.7;
$hero-content-background-color1: rgb(0,0,0);
$hero-content-background-color2: rgba(0,0,0,0.3);

// Empty hero background color.
$hero-empty-view-background: #e0e0e0;

// Gutter for arrow of navigation.
$hero-arrow-gutter: 0.63rem;

// Height for screen size and less.
$hero-min-height: 300px;
$hero-max-height: 300px;

// For screen size sm and more.
$hero-min-height-sm: 400px;
$hero-max-height-sm: 400px;

// For screen size md and more.
$hero-min-height-md: 600px;
$hero-max-height-md: 600px;

$hero-container-v-padding: 60px;
$hero-container-h-padding-sm: 150px;

// -----------------------------------------------------------------------------
// Custom Varbase Media Header variables for Vartheme.
// -----------------------------------------------------------------------------

// Varbase Media Header container height.

$vmh-container-v-padding: 3.75rem;
$vmh-container-h-padding: 1rem;

$vmh-container-min-height: 300px;
$vmh-container-max-height: 300px;

$vmh-container-min-height-lg: 300px;
$vmh-container-max-height-lg: 300px;

$vmh-container-top-margin: 0;
$vmh-container-bottom-margin: 0.6875rem;

// Varbase Media Header fallback container background color.
$vmh-fullback-container-background-color: $primary;

// Varbase Media Header content text general style.
$vmh-content-text-color: $white;

// Varbase Media Header title style.
$vmh-title-color: $white;
$vmh-title-font-size: 1.875rem;
$vmh-title-font-size-lg: 3.625rem;

// Varbase Media Header breadcrumb style.
$vmh-breadcrumb-color: $white;
$vmh-breadcrumb-font-size: 0.75rem;
$vmh-breadcrumb-font-size-lg: 0.875rem;
