/*
 * SPDX-FileCopyrightText: Copyright 2025 New Vector Ltd.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 */

.root {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cpd-space-4x);
  padding-block-start: var(--cpd-space-6x);
}

.section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--cpd-space-2x);
}

.divider {
  color: var(--cpd-color-icon-quaternary);
  font: var(--cpd-font-body-sm-semibold);
  letter-spacing: var(--cpd-font-letter-spacing-body-sm);
  user-select: none;

  &::after {
    content: "•";
  }
}

.spacer {
  flex: 1;
}

.element-logo {
  margin-inline-end: auto;
  color: var(--cpd-color-text-secondary);
  font: var(--cpd-font-body-xs-regular);
  letter-spacing: var(--cpd-font-letter-spacing-body-xs);

  & > svg {
    display: inline-block;
    color: var(--cpd-color-text-primary);
    padding-inline-start: var(--cpd-space-1x);
    vertical-align: top;
  }
}

.copyright-notice {
  color: var(--cpd-color-text-secondary);
  font: var(--cpd-font-body-sm-regular);
  letter-spacing: var(--cpd-font-letter-spacing-body-sm);
}

/** At the mobile breakpoint, we make the footer stack vertically and hide the section divider */
@media screen and (width <= 768px) {
  .root {
    flex-direction: column;

    & > .divider {
      display: none;
    }
  }

  /** The Element logo moves to the end of the footer */
  .element-logo {
    order: 1;
    margin-inline-end: initial;
  }
}
