#sidebar {
  background-color: $builda-darkgray;
  color: white;

  .main-container {
    display: flex;
    flex-direction: column;

    .navigation {
      flex-grow: 1;

      display: flex;
      flex-direction: column;

      padding-top: calculateRem(40);
      padding-bottom: calculateRem(20);

      .top {
        flex-shrink: 0;

        margin-bottom: calculateRem(20);

        padding-top: calculateRem(20);
        padding-right: calculateRem(40);
        padding-bottom: calculateRem(20);
        padding-left: calculateRem(40);

        a.logo {
          display: block;

          margin-bottom: calculateRem(45);

          padding-right: calculateRem(20);
          padding-left: calculateRem(20);

          img {
            max-width: 100%;
          }
        }

        .profile-name {
          display: flex;

          margin-top: calculateRem(40);
        }
      }

      .menu {
        flex-grow: 1;

        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .main-items {
          overflow-y: auto;

          .item {
            display: block;

            margin-bottom: calculateRem(20);

            padding-top: calculateRem(5);
            padding-right: calculateRem(40);
            padding-bottom: calculateRem(5);
            padding-left: calculateRem(40);

            color: $light;

            font-size: 20px;
            line-height: 24px;

            &.router-link-active {
              background-color: $admin-primary-color;
              color: setTextColor($admin-primary-color);
            }

            &.more {
              &.active {
                background-color: $builda-gray;
                color: setTextColor($builda-gray);
              }

              span {
                font-size: 20px;
                line-height: 24px;
              }
            }

            &:not(.router-link-active):hover {
              color: $admin-primary-color;
            }
          }
        }

        .last-items {
          flex-shrink: 0;

          display: flex;

          margin-top: calculateRem(20);

          padding-right: calculateRem(40);
          padding-left: calculateRem(40);

          .button {
            width: 100%;
          }
        }
      }
    }

    .icons-container {
      a.icon-container {
        display: block;

        padding-top: calculateRem(10);
        padding-right: calculateRem(10);
        padding-bottom: calculateRem(10);
        padding-left: calculateRem(10);

        line-height: 1;

        &#close_icon {
          background-color: $builda-darkgray;
          color: setTextColor($builda-darkgray);
        }

        &#public_icon {
          background-color: $admin-primary-color;
          color: setTextColor($builda-darkgray);
        }
      }
    }
  }
}
