#main__menu {
  width: 256px;

  &.open {
    transform: translateX(0);
  }

  .unread {
    font-weight: bolder;
  }

  solid-router {
    /* Chevron visible on large screen + rotation */
    .menu-wrapper {
      .menu-icon.icon-arrow-up {
        visibility: hidden;
      }
      @include breakpoint(lg) {
        .menu-icon.icon-arrow-up {
          visibility: visible;
        }
        &.is-closed {
          .sub-menu {
            display: none;
          }
          .menu-chevron {
            transform: rotateX(180deg);
          }
        }
      }
    }
    /* end */

    /* General styles for the main tabs */
    .menu {
      cursor: pointer;
      display: flex;
      align-items: center;

      &[active] {
        background-color: var(--color-third);
        color: var(--color-heading);

        .menu-icon:before {
          background-color: var(--color-heading);
          color: white;
        }
        &+.divider {
          display: none;
        }
      }
      .menu-icon {
        &::before {
          border-radius: 100%;
          height: 1.9em;
          line-height: 1.9em;
          width: 1.9em;
        }
      }
    }
    /* End */


    /* Styles for the submenus */
    .sub-menu {

      .project-tab,
      .circle-tab,
      .message-tab {

        /* Spaces and cursor */
        /* For project and circle */
        hubl-menu-fix-url-project>solid-link>solid-display>div,
        hubl-menu-fix-url-circle>solid-link>solid-display>div,
        solid-form + div>solid-display>div {
          display: flex;
          justify-content: space-between;
          padding: 6px 10px 6px 23px;
          cursor: pointer;
        }

        &>div>solid-display {
          display: block;

          &:last-child>div {
            margin-bottom: 2.2rem;
          }
          &[fields="project(customer.name, name), badge"]>div {
            padding: 0;
          }
        }

        /* when a subtab is [active] */
        solid-display[active]>div {
          background-color: var(--color-third);
          color: var(--color-heading);
          font-weight: bold;
        }

        /* Styles for the search input */
        .search-field>input {
          margin-left: 30px;
          margin-bottom: 10px;
          width: calc(80vw - 71px);
          display: block;
          background-color: var(--color-heading);
          color: white;
          border: 1px solid white;
          border-radius: 3px;
          padding-left: 9.5px;
          height: 27px;
          opacity: 0.8;

          @include breakpoint(lg) {
            margin: auto;
            margin-bottom: 10px;
            width: auto;
          }
        }

        /* Styles for the small icon */
        .sub-menu-icon {
          width: 20px;
          text-align: center;

          div {
            font-family: simple-line-icons;
            margin-right: 4px;
          }
        }

        /* Styles for the name */
        .sub-menu-name {
          flex: 3;

            .project-customer,
            .project-name,
            &>div{
              display: block;
              width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */

              @include breakpoint(lg) {
                width: 150px;
              }
            }

          &.ellipsis>div,
          .project-customer,
          .project-name>div {
  
            @include breakpoint(lg) {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }

        /* Styles for the counter */
        .sub-menu-badge div.counter:not([data-nb-unread="0"]) {
          text-align: center;
          display: block;
          background-color: var(--color-third, gray);
          border-radius: 50%;
          font-size: 12px;
          line-height: 20px;
          width: 20px;
          height: 20px;
          padding-bottom: 0;
          color: var(--color-heading);
        }
      }
    }

    .divider {
      height: 1px;
      background-color: #D7DBE0;
      opacity: 0.2;
    }
  }
}