.sidebar-footer-wrapper {
  box-sizing: border-box;
  width: 100%;
  position: sticky;
  bottom: 0;

  .sidebar-footer-container {
    display: flex;
    align-items: stretch;
    position: relative;
    border-top: 1.5px solid var(--primary-low);
    background: var(--primary-very-low);
    padding: 0.5em 0.8em;
    padding-bottom: max(env(safe-area-inset-bottom), 0.5em);
    &:before {
      // fade to make scroll more apparent
      position: absolute;
      content: "";
      display: block;
      height: 1.5em;
      top: calc(-1.5em - 1px);
      left: -0.5em;
      right: -0.5em;
      width: calc(100% + 0.5em);
      pointer-events: none;
      background: linear-gradient(
        to bottom,
        rgba(var(--primary-very-low-rgb), 0),
        rgba(var(--primary-very-low-rgb), 1)
      );
    }
  }

  .sidebar-footer-link {
    display: inline-flex;
    align-items: center;
    height: 100%;
    font-size: var(--font-down-1);
    color: var(--primary-high);
    padding: 0 0.5em;
    &:hover,
    &:focus {
      background: var(--d-sidebar-highlight-color);
    }
  }

  .sidebar-footer-links-separator {
    color: var(--primary-low-mid);
  }

  .sidebar-footer-actions {
    margin-left: auto;
  }

  .sidebar-footer-actions-button.btn {
    background: transparent;
    border: none;
    padding: 0.25em 0.4em;

    .d-icon {
      font-size: var(--font-down-1);
      color: var(--primary-medium);
    }
    &:focus,
    &:hover {
      background: var(--d-sidebar-highlight-color);
    }
  }
}