Footer.module.scss

@use 'src/styles/breakpoints';
@use 'src/styles/utility';
@use 'src/styles/constants';

.footer {
  background-color: var(--color-background-elevated-new);
}

.flowItem {
  @include utility.pageContainer();
  border-block-start: 1px solid var(--color-borders-hairline);
  padding-block-start: var(--spacing-medium);
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: auto;
  margin-inline-end: auto;

  --flow-side-spacing: var(--spacing-small);
  padding-inline-start: var(--flow-side-spacing);
  padding-inline-end: var(--flow-side-spacing);
  @include breakpoints.tablet {
    --flow-side-spacing: 0;
  }

  /**
  * On mobile, a few components can't have padding at parent level.
  * For example the QuickLinks, Recently Read, etc. Because they are horizontally scrollable
  * So, we make padding horizontal 0 the parent level, and pass the `--flow-side-spacing` down to children
  * Those components, will implement their own space/padding based on `--flow-side-padding` value
  * See RecentReadingSession.module.scss for an implementation example
  *
  * For now we only want this to be implemented on mobile, so we make `--flow-side-padding: 0` on tablet and above
  **/
  &.fullWidth {
    padding-inline-end: 0;
    padding-inline-start: 0;
  }
}

.container {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  @include breakpoints.desktop {
    flex-direction: row;
  }
}

.title {
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-xlarge);
}

.iconContainer {
  & > svg > path {
    fill: var(--color-text-default);
  }
  margin-block-end: var(--spacing-xxsmall);
}
.headingContainer {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  @include breakpoints.desktop {
    flex-direction: row;
    .iconContainer {
      margin-inline-end: var(--spacing-medium);
    }
  }
}

.copyright {
  margin-block-start: var(--spacing-xxsmall);
  font-size: var(--font-size-xsmall);
  opacity: var(--opacity-85);
}

.groupListContainer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  flex: 1;
  max-inline-size: calc(15 * var(--spacing-mega));
}

.group {
  display: flex;
  flex-direction: column;
  margin-block-end: var(--spacing-medium);
  inline-size: 50%;
  @include breakpoints.tablet {
    inline-size: 26%;
  }
}

.ourProjectsGroup {
  @include breakpoints.tablet {
    inline-size: 28%;
  }
}

.groupTitle {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-large);
  margin-block-end: var(--spacing-xsmall);
}

.description {
  max-inline-size: calc(15 * var(--spacing-mega));
  opacity: var(--opacity-75);
  margin-block-start: var(--spacing-xxsmall);
  margin-block-end: var(--spacing-medium);
}

.linkContainer {
  opacity: var(--opacity-75);
  @include breakpoints.smallerThanTablet {
    margin-block-end: var(--spacing-xxsmall);
  }
  margin-block-start: var(--spacing-xxsmall);
}

.disabledlinkContainer {
  opacity: var(--opacity-50);
  cursor: not-allowed;
}

.titleAndDescriptionContainer {
  max-inline-size: calc(12.5 * var(--spacing-mega));
  margin-inline-end: var(--spacing-medium);
}

.bottomSectionContainer {
  display: flex;
  flex-direction: column-reverse;
  @include breakpoints.tablet {
    flex-direction: row;
  }
  padding-block-start: var(--spacing-medium);
  justify-content: space-between;
}
.actionsSections {
  margin-block-end: var(--spacing-small);
  display: flex;
  gap: var(--spacing-small);
  @include breakpoints.tablet {
    flex-direction: row;
    align-items: center;
    gap: 0;
  }
}
.actionContainer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--spacing-medium);
  @include breakpoints.tablet {
    margin-inline-start: var(--spacing-mega);
  }
}
.actionLabel {
  line-height: 1;
  margin-inline-end: var(--spacing-small);
}

.bottomLinks {
  & > a {
    margin-inline-end: var(--spacing-medium);
    opacity: var(--opacity-85);
  }
}

// https://github.com/quran/quran.com-frontend-next/issues/560
// our AudioPlayer is has "position: fixed", so its position is removed from the normal flow
// we need to add an empty space placeholder, so the AudioPlayer doesn't cover the other elements in the page
.emptySpacePlaceholder {
  block-size: constants.$audio-player-default-height;
}

.donateButton {
  font-weight: var(--font-weight-semibold);
}

.hiringAnnouncementContainer {
  background-color: var(--color-secondary-faded);
  padding: var(--spacing-small);
  margin-block: var(--spacing-small);
  border-radius: var(--border-radius-default);
}

.groupDescription {
  opacity: var(--opacity-75);
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  margin-block-start: var(--spacing-xsmall);
}