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

  &.pinned {
    .sidebar-nav {
      overflow: auto;
    }
  }

  .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;

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

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

    .link-text {
      flex: 1;
      margin-left: $margin;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    > a {
      display: flex;
      align-items: center;
      text-decoration: none;
      border: none;
      padding: $itemSpacing;

      &.active, &:hover {
        background: $lensBlue;
        color: $sidebarActiveColor;
      }
    }

    hr {
      background-color: transparent;
    }
  }

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