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

:host {
    /**
     * @prop --background: Background of the card
     * @prop --color: Color of the card
     */
    --lu-safe-area-left: 0px;
    --lu-safe-area-right: 0px;

    @include font-smoothing();
    @include padding($card-header-padding-top, $card-header-padding-end, $card-header-padding-bottom, $card-header-padding-start);

    display: block;
    position: relative;

    transform: translateZ(0);

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

    font-family: $font-family-base;

    overflow: hidden;
}

// Card Colors
// ---------------------------------------------

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

:host(.lu-color)::slotted(*) lu-card-header,
:host(.lu-color)::slotted(*) lu-card-buttons,
:host(.lu-color)::slotted(*) lu-card-button,
:host(.lu-color)::slotted(*) lu-card-footer,
:host(.lu-color)::slotted(*) lu-card-title {
    background: current-color(base);
    color: current-color(contrast);
}