@use "@/styles/variables";

.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--cmm-color-border-subtle);
}

.inner {
  @include variables.container;

  padding: 1rem 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
}

.left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.copyrights {
  > * {
    font-size: var(--cmm-font-size-xs);
    margin-top: 0.2rem; // Align with logo
    color: var(--cmm-color-font-muted);
  }

  > * + * {
    margin-inline-start: 0.75em;

    &::before {
      content: "·";
      margin-inline-end: 0.75em;
      font-weight: var(--cmm-font-weight-extrabold);
    }
  }
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1.25rem;
}

.linkList {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 1.5rem;
  row-gap: 0.25rem;
}

.link {
  font-size: var(--cmm-font-size-xs);
  font-weight: var(--cmm-font-weight-semibold);
  color: var(--cmm-color-link);
}
