//
// Component: Card
//
// ========================================================================


// Variables
// ========================================================================

@card-body-padding-horizontal: 					40px;
@card-body-padding-horizontal-l: 				50px;
@card-body-padding-vertical: 					40px;
@card-body-padding-vertical-l: 					60px;
@card-header-padding-horizontal: 				20px;
@card-header-padding-horizontal-l: 				20px;
@card-header-padding-vertical: 					35px;
@card-header-padding-vertical-l: 				25px;

@card-hover-background:                         @global-background;
@card-hover-box-shadow: 						@global-large-box-shadow;

@card-default-background:                       @global-background;
@card-default-hover-background:                 @card-default-background;
@card-default-hover-box-shadow: 				@global-xlarge-box-shadow;

@card-primary-color-mode:                       light;

@card-secondary-background:                     darken(@global-secondary-background, 5%);

//
// Master
//

@card-border-radius:                            @global-border-radius;
@card-hover-box-shadow:                         @global-large-box-shadow;

@card-default-box-shadow:                       @global-medium-box-shadow;
@card-default-hover-box-shadow:                 @global-large-box-shadow;

@card-primary-box-shadow:                       0 20px 40px 0 rgba(0, 0, 0, 0.1);
@card-primary-hover-box-shadow:                 0 10px 60px 0 saturate(fade(@global-primary-background, 50%), 60%);
@card-secondary-box-shadow:                     0 20px 40px 0 rgba(0, 0, 0, 0.05);
@card-secondary-hover-box-shadow:               0 10px 60px 0 saturate(fade(@global-secondary-background, 50%), 60%);

@internal-card-primary-gradient:                linear-gradient(45deg, @global-primary-background, saturate(spin(@global-primary-background, 30), 21%));
@internal-card-primary-hover-gradient:          linear-gradient(45deg, @global-primary-background, saturate(spin(@global-primary-background, 30), 21%));

@internal-card-secondary-gradient:              linear-gradient(45deg, @global-secondary-background, saturate(spin(@global-secondary-background, 5), 21%));
@internal-card-secondary-hover-gradient:        linear-gradient(45deg, @global-secondary-background, saturate(spin(@global-secondary-background, 5), 21%));


// Component
// ========================================================================

.hook-card() {}


// Sections
// ========================================================================

.hook-card-body() {}

.hook-card-header() {}

.hook-card-footer() {}


// Media
// ========================================================================

.hook-card-media() {}

.hook-card-media-top() {}

.hook-card-media-bottom() {}

.hook-card-media-left() {}

.hook-card-media-right() {}


// Title
// ========================================================================

.hook-card-title() {}


// Badge
// ========================================================================

.hook-card-badge() {}


// Hover modifier
// ========================================================================

.hook-card-hover() {}


// Style modifiers
// ========================================================================

.hook-card-default() {}

.hook-card-default-title() {}

.hook-card-default-hover() {}

.hook-card-default-header() {}

.hook-card-default-footer() {}

//
// Primary
//

.hook-card-primary() {}

.hook-card-primary-title() {}

.hook-card-primary-hover() {}

//
// Secondary
//

.hook-card-secondary() {}

.hook-card-secondary-title() {}

.hook-card-secondary-hover() {}


// Miscellaneous
// ========================================================================

.hook-card-misc() {}
