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

// Card Footer
// --------------------------------------------------

:host {
    --min-height: 44px;
    /**
     * @prop --min-height: Minimum height of the footer
     * @prop --padding-bottom: Bottom padding of the footer
     * @prop --padding-end: End padding of the footer
     * @prop --padding-start: Start padding of the footer
     * @prop --padding-top: Top padding of the footer
     */
    @include padding($card-footer-padding-top, $card-footer-padding-end, $card-footer-padding-bottom, $card-footer-padding-start);
    @include font-smoothing();

    display: block;
    position: relative;

    width: 100%;

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

    font-family: $font-family-base;

    contain: content;

    box-sizing: border-box;
}

: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-footer-translucent) {
    background-color: $card-footer-translucent-background-color;
    backdrop-filter: $card-footer-translucent-filter;
}


.footer-container {
    @include padding(
            var(--padding-top),
            var(--padding-end),
            var(--padding-bottom),
            var(--padding-start)
    );
    display: flex;
    position: relative;

    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    min-height: var(--min-height);

    contain: content;
    overflow: hidden;

    box-sizing: border-box;
}

// Footer: Content
// --------------------------------------------------

.footer-content {
    flex: 1;
    order: map-get($footer-order, content);

    min-width: 0;
    max-width: 100%;
}

// Footer Slot Placement
// --------------------------------------------------

::slotted([slot="start"]) {
    order: map-get($footer-order, slot-start);
}

::slotted([slot="end"]) {
    order: map-get($footer-order, slot-end);

    text-align: end;
}