@import "../../themes/liberty.globals";
@import "card-header.vars";

// Card Header
// --------------------------------------------------

:host {
    @include padding($card-header-padding-top, $card-header-padding-end, $card-header-padding-bottom, $card-header-padding-start);

    display: flex;
    position: relative;

    flex-flow: column;

    background: var(--background);
    color: var(--color);
}

:host(.lu-color) {
    background: current-color(base);
    color: current-color(contrast);
}

:host(.lu-color) ::slotted(lu-card-title),
:host(.lu-color) ::slotted(lu-card-image) {
    color: currentColor;
}
:host(.card-header-translucent) {
    background-color: $card-header-translucent-background-color;
    backdrop-filter: $card-header-translucent-filter;
}