.Sidebar {
  $iconSize: 24px;
  $itemSpacing: floor($unit / 2.6) floor($unit / 1.6);

  &.compact {
    .sidebar-nav {
      @include hidden-scrollbar; // fix: scrollbar overlaps icons
    }
  }

  .header {
    background: $sidebarLogoBackground;
    padding: $padding / 2;
    height: var(--main-layout-header);

    a {
      font-size: 18.5px;
      text-decoration: none;
    }

    div.logo-text {
      position: absolute;
      left: 42px;
      top: 11px;
    }

    .logo-icon {
      width: 28px;
      height: 28px;
      margin-left: 2px;
      margin-top: 2px;
      margin-right: 10px;

      svg {
        --size: 28px;
        padding: 2px;
      }
    }

    .pin-icon {
      margin: auto;
      margin-right: $padding / 2;
    }
  }

  .sidebar-nav {
    padding: $padding / 1.5 0;
    overflow: auto;

    .Icon {
      --size: #{$iconSize};

      box-sizing: content-box;
      padding: floor($padding / 2.6);
      border-radius: 50%;
    }

    hr {
      background-color: transparent;
    }
  }

  .loading {
    padding: $padding;
    text-align: center;
  }
}