wagtail/client/scss/components/_footer.scss

@use 'sass:math';

.footer {
  $border-curvature: 3px;
  @include transition(bottom 0.5s ease 1s);
  @include row();
  z-index: 20;

  ul {
    @include unlist();
  }

  li {
    float: left;

    .dropdown li,  // dropdown li
        &:last-child {
      margin-inline-end: 0;
    }
  }

  &__container {
    border-radius: $border-curvature $border-curvature 0 0;
    background: theme('colors.primary.DEFAULT');
    color: $color-white;
    margin-top: 0;
    margin-inline-end: 0;
    transition: transform 1s;

    &:first-child {
      margin-top: 0;
      box-shadow: 0 0 2px theme('colors.white-50');
    }

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

    li {
      margin-inline-end: 1em;
    }
  }

  &__save-warning {
    font-size: 0.95em;
    display: flex;
    align-items: center;

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

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

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

  .actions {
    width: 250px;

    &--primary {
      width: 350px;
    }

    .dropdown {
      input[type='submit'],
      input[type='reset'],
      input[type='button'],
      button,
      .button {
        padding-inline-end: 2.6em;
      }
    }
  }

  .preview .dropdown {
    width: 250px;
  }

  .meta {
    float: right;
    text-align: end;
    padding: 7px math.div($grid-gutter-width, 2);
    font-size: 0.85em;

    p {
      margin: 0;
      margin-inline-end: $grid-gutter-width;
      white-space: nowrap;
    }

    a {
      color: inherit;

      &:hover {
        color: $color-link;
      }
    }
  }

  @include media-breakpoint-down(xs) {
    .actions,
    .preview,
    &__container,
    .preview .dropdown {
      width: 100%;
    }

    margin-top: $mobile-nice-padding;

    .meta {
      p {
        white-space: normal;
        width: 100%;
      }

      .avatar {
        inset-inline-start: auto;
      }
    }

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

      &--hidden {
        display: none;
      }
    }

    &__save-warning {
      display: flex;
      flex-direction: row;
      justify-content: center;
    }
  }

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

    > ul {
      display: flex;
    }

    &__container {
      padding: 0.75em;
      margin-inline-end: 0;

      &:not(:first-child) {
        margin-inline-start: -$border-curvature;
      }
    }

    &__save-warning {
      margin-inline-end: 50px;
    }
  }
}

// Footer control bar for performing actions on the page
footer .actions,
footer .preview {
  .button {
    @apply w-leading-none w-inline-flex w-items-center;

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

footer .actions {
  .button {
    font-weight: 600;
    white-space: initial;
  }
}

footer .preview {
  button,
  .button {
    padding: 0 1em;

    @include media-breakpoint-down(xs) {
      width: 100%;
      margin-top: 2px;
      margin-bottom: 2px;
      height: 3em;
    }

    background-color: $color-grey-2;
    border-color: $color-grey-2;
  }

  .dropdown {
    input[type='button'],
    input[type='submit'],
    button,
    .button {
      background-color: $color-grey-2;
      border-color: $color-grey-2;
    }

    ul,
    .dropdown-toggle {
      background-color: $color-grey-2;
    }

    &.open > .button + .dropdown-toggle {
      background-color: $color-grey-2;
    }
  }
}