@use 'sass:math';

lf-top-bar {
  display: block;

  nav {
    background-color: $top-bar-bg-color;
    color: $top-bar-color;
    // Don't use Bootstrap's `box-shadow` mixin since we don't want to force all
    // other shadows just to show this one
    box-shadow: $top-bar-box-shadow;
  }

  .navbar-brand {
    display: flex;
    align-items: center;
  }

  .tree-nav-show {
    margin-right: $spacer;
  }

  .navbar-title {
    flex: 1;
    color: $top-bar-color;
    text-decoration: none;
  }

  .navbar-actions {
    flex: 1;
    justify-content: flex-end;
  }

  .pending-app,
  .rejected-app {
    margin-left: math.div($spacer, 2);
  }
  .pending-app {
    @include loading($pending-size, $pending-border-size);
  }
  .rejected-app {
    color: theme-color('danger');
    cursor: pointer;
  }

  // For some reason, Bootstrap's `dropdown-menu-right` isn't working, see:
  // https://github.com/twbs/bootstrap/issues/23553
  .dropdown-menu-right {
    left: auto !important;
    right: 0 !important;
  }
}