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


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

//
// New
//

@internal-card-badge-gradient:                 ~'';
@internal-card-badge-background-image:         ~'';

@internal-card-default-gradient:               ~'';
@internal-card-default-hover-gradient:         ~'';

@internal-card-primary-gradient:               ~'';
@internal-card-primary-hover-gradient:         ~'';

@internal-card-secondary-gradient:             ~'';
@internal-card-secondary-hover-gradient:       ~'';

@internal-card-overlay-gradient:               ~'';
@internal-card-overlay-hover-gradient:         ~'';


// 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
// ========================================================================

// Gradient
.hook-card-badge() when not (@internal-card-badge-gradient = ~'') and (@internal-card-badge-background-image = ~'') {
    background-image: @internal-card-badge-gradient;
}

// Image
.hook-card-badge() when not (@internal-card-badge-background-image = ~'') and (@internal-card-badge-gradient = ~'') {
    background-color: transparent !important;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.hook-card-badge() when not (@internal-card-badge-background-image = ~'') and not (@card-badge-background = transparent) {
    .svg-fill(@internal-card-badge-background-image, "#000", @card-badge-background);
}


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

.hook-card-hover() {}


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

.hook-card-default() when not (@internal-card-default-gradient = ~'') {
    background-image: @internal-card-default-gradient;
}

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

.hook-card-default-hover() when not (@internal-card-default-hover-gradient = ~'') {
    background-image: @internal-card-default-hover-gradient;
}

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

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

//
// Primary
//

.hook-card-primary() when not (@internal-card-primary-gradient = ~'') {
    background-image: @internal-card-primary-gradient;
}

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

.hook-card-primary-hover() when not (@internal-card-primary-hover-gradient = ~'') {
    background-image: @internal-card-primary-hover-gradient;
}

//
// Secondary
//

.hook-card-secondary() when not (@internal-card-secondary-gradient = ~'') {
    background-image: @internal-card-secondary-gradient;
}

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

.hook-card-secondary-hover() when not (@internal-card-secondary-hover-gradient = ~'') {
    background-image: @internal-card-secondary-hover-gradient;
}

//
// Overlay
//

.hook-card-overlay() when not (@internal-card-overlay-gradient = ~'') {
    background-image: @internal-card-overlay-gradient;
}

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

.hook-card-overlay-hover() when not (@internal-card-overlay-hover-gradient = ~'') {
    background-image: @internal-card-overlay-hover-gradient;
}


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

.hook-card-misc() {}


// Inverse
// ========================================================================

.hook-inverse-card-badge() when not (@internal-card-badge-gradient = ~'') {
    background-image: none;
}

.hook-inverse-card-badge() when not (@internal-card-badge-background-image = ~'') and not (@inverse-card-badge-background = transparent) {
    .svg-fill(@internal-card-badge-background-image, "#000", @inverse-card-badge-background);
}
