: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
   */
  padding: 16px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: block;
  position: relative;
  width: 100%;
  background: var(--background);
  color: var(--color);
  font-family: var(--lu-font-family, inherit);
  contain: content;
  box-sizing: border-box;
}

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

:host(.lu-color) ::slotted(lu-card-title),
:host(.lu-color) ::slotted(lu-card-image) {
  color: currentColor;
}

:host(.card-footer-translucent) {
  background-color: rgba(var(--lu-background-color-rgb, 255, 255, 255), 0.9);
  backdrop-filter: saturate(180%) blur(30px);
}

.footer-container {
  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 {
  flex: 1;
  order: 2;
  min-width: 0;
  max-width: 100%;
}

::slotted([slot=start]) {
  order: 1;
}

::slotted([slot=end]) {
  order: 3;
  text-align: end;
}