.silex-icons-menu {
  background-color: @silexmediumgrey; /* hide sub menu during opening */
  position: fixed;
  z-index: 4; /* over the sub menus */
}
.icon {
  cursor: pointer;
  width: 25px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  transition: opacity 0.1s linear 0s;
  text-decoration: none;
}
.off {
  opacity: .5;
}
.on {
  opacity: 1;
  color: white;
}
.selected {
  color: @silexlightblue;
}
.icon:hover {
  .on();
  color: @silexlightblue;
}
div.icon, a.icon, span.icon {
  font-size: large;
}
.sep {
  border: 1px solid @silexmediumdarkgrey;
}
.silex-menu .menu-container {
  .silex-icons-menu();
  overflow-x: hidden;
  overflow-y: auto;
  top: @contextMenuHeight;
  bottom: 0;
  width: @menuWidth;
  .previewResponsize {background-image: url(../assets/context-menu/responsize-small.png);}
  .sep {
    height: 0;
  }
  .icon {
    margin: 15px 5px 20px;
  }
}
///////////////
// TODO: delete this remains
.goog-menubar.goog-menubar-horizontal,
.crowdfundgin-button.menubar.goog-menubar.goog-menubar-horizontal {
  display: none !important;
}
///////////////
.silex-sub-menu() {
  .silex-icons-menu();
  .sub-menu-hidden(200px); /* the width is an approximation */
  z-index: 3;
  .icon {
    margin: 9px 9px 20px;
  }
  .sep {
    border: none;
    border-top: 1px solid @silexdarkgrey;
    width: 100%;
    margin: 0 !important;
    padding: 0;
  }
  & > .label {
    background-color: @silexdarkergrey;
    font-weight: 700;
    font-size: 13px;
    padding-top: 8px;
    padding-left: 8px;
    cursor: default;
    line-height: 2;
    color: @silexlightergrey;
    text-align: center;
  }
  & > div, & > a {
    min-height: 32px;
    padding-top: 2px;
    padding-right: 11px;
    padding-bottom: 0px;
    border: 1px solid @silexdarkgrey;
    border-bottom: none;
    box-shadow: inset 0 1px 0 @silexlightgrey;
    color: @silexlightergrey;
    font-size: 12px;
    line-height: 1.5;
    text-decoration: none;
  }
  .shortcut {
    float: right;
    margin-top: 7px;
    margin-left: 15px;
    font-style: italic;
    .off;
  }
  .prodotype-icon {
    background-image: url(../libs/prodotype/prodotype-logo-small.png);
  }
}
.silex-sub-menu-text {
  padding: 10px;
  min-width: 180px;
  top: @contextMenuHeight;
  .sub-menu-item:hover {
    background-color: @silexmediumdarkgrey;
    cursor: pointer;
  }
  & > *:last-child {
    border-bottom: 1px solid @silexdarkgrey;
  }
}
.about-menu-container,
.file-menu-container,
.code-menu-container,
.add-menu-container {
  .silex-sub-menu();
  .silex-sub-menu-text();
}
.silex-logo {
  cursor: pointer;
  position: relative;
  z-index: 3;
  margin: 3px;
}
.file-menu-container {
  .icon.svg {
    position: absolute;
    margin: 0 8px;
    width: 20px;
  }
  .file-save-as {
    padding-top: 6px;
  }
  .file-save-as span {
    margin-left: 34px;
    line-height: 1.8;
  }
}
.add-menu-icons {
  span.icon {
    padding: 10px;
    margin: 18px;
    &.fa-inverse {
      padding-left: 0;
      padding-right: 0;
    }
  }
  .text {background-image: url(../assets/context-menu/glyphicons-108-text-resize.png);}
  .image {background-image: url(../assets/context-menu/glyphicons-139-picture.png);}
  .container {background-image: url(../assets/context-menu/glyphicons-95-vector-path-square.png);}
  .small-icon {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40%;
  }
}
/* sub menus visibility */
.sub-menu-hidden(@width) {
  transition: left @silexUiTransitions, opacity @silexUiTransitions;
  left: -@width;
  bottom: @breadCrumbsHeight;
  opacity: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
.sub-menu-visible() {
  left: @menuWidth;
  width: inherit;
  opacity: 1;
}
body.page-tool-visible {
  .silex-menu .show-pages.icon {
    opacity: 1;
  }
  .silex-page-tool {
    .sub-menu-visible();
  }
}
body.about-menu-visible {
  .silex-menu .show-about-menu.icon {
    opacity: 1;
  }
  .about-menu-container {
    .sub-menu-visible();
  }
}
body.file-menu-visible {
  .silex-menu .show-file-menu.icon {
    opacity: 1;
  }
  .file-menu-container {
    .sub-menu-visible();
  }
}
body.code-menu-visible {
  .silex-menu .show-code-menu.icon {
    opacity: 1;
  }
  .code-menu-container {
    .sub-menu-visible();
  }
}
body.add-menu-visible {
  .silex-menu .show-add-menu.icon {
    opacity: 1;
  }
  .add-menu-container {
    .sub-menu-visible();
  }
}
/* *** */
// mobile mode icons
body .silex-menu {
  & .mobile.icon.fa-inverse.fa-mobile {
    height: 32px;
    font-size: 27px;
  }
}
body .silex-menu .mobile {.on}
body .silex-menu .desktop {.on; .selected}
body.mobile-mode .silex-menu .mobile {.on; .selected}
body.mobile-mode .silex-menu .desktop {.on}