wagtail/client/scss/components/_footer.scss

@use 'sass:math';

.footer {
  @include transition(bottom 0.5s ease 1s);
  @include row();
  margin-top: $mobile-nice-padding;
  margin-inline-start: $mobile-nice-padding;
  margin-inline-end: $mobile-nice-padding;
  z-index: 20;

  @include media-breakpoint-up(sm) {
    margin-top: 0;
    margin-inline-start: calc(#{$desktop-nice-padding} - 0.75em);
    margin-inline-end: $desktop-nice-padding;
    width: auto;
    position: fixed;
    bottom: 0;
  }

  &__emphasise-span-tags span {
    color: theme('colors.warning.100');
  }
}

.footer__container {
  border-radius: theme('borderRadius.sm') theme('borderRadius.sm') 0 0;
  background: theme('colors.surface-menus');
  color: theme('colors.text-label-menus-default');
  transition: transform 1s;

  @include media-breakpoint-down(xs) {
    width: 100%;

    &:not(:first-child) {
      border-radius: 0;
    }
  }

  @include media-breakpoint-up(sm) {
    padding: theme('spacing.[2.5]');
    margin-inline-end: 0;

    &:not(:first-child) {
      margin-inline-start: calc(-1 * theme('borderRadius.sm'));
    }
  }

  &.footer__container--hidden {
    transform: translateY(100%);

    @include media-breakpoint-down(xs) {
      display: none;
    }
  }
}

.footer__save-warning {
  font-size: 0.95em;
  display: flex;
  flex-direction: row;
  justify-content: center;

  .icon {
    font-size: 1.2em;
    margin-inline-end: 0.5em;
  }

  p {
    margin: -0.2em 0 0 0;
  }

  @include media-breakpoint-up(sm) {
    margin-inline-end: 50px;
    align-items: center;
  }
}

// Footer control bar for performing actions on the page
.actions {
  width: 100%;

  @include media-breakpoint-up(sm) {
    width: 250px;
  }

  &--primary {
    @include media-breakpoint-up(sm) {
      width: 310px;
    }
  }

  .button {
    @apply w-leading-none w-inline-flex w-items-center;
    font-weight: 600;
    padding: 0 theme('spacing.3');
    white-space: initial;

    .icon {
      width: theme('spacing.4');
      margin-inline-end: theme('spacing.2');
      flex-shrink: 0;
    }
  }
}

.actions .w-dropdown-button {
  width: 100%;

  > .button {
    flex-grow: 1;
  }
}