/* SideNav how-to from :
 * https://www.w3schools.com/howto/howto_js_sidenav.asp
 */
@import '~@synerty/peek-theme/scss/_mixins.web';
@import '~@synerty/peek-theme/scss/_variables.web';

$edit-toolbar-margin: 6px;

$edit_toolbar_button_height: 20px;
$edit_toolbar_height: $edit_toolbar_button_height + 2 * $edit-toolbar-margin;


/* The side navigation menu */
.edit-toolbar {
  background-color: #111;
  overflow-x: scroll;
  transition: 0.5s;
  margin-top: 0px;

}

/* Set the style for when the toolbar is open */
.edit-toolbar-is-open {
  height: 4px;
}

/* Set the style for when the toolbar is closed */
.edit-toolbar-is-closed {
  height: 0;
  padding: 0;
  margin: 0px;
}

/* The spacer between the buttons */
.edit-toolbar-spacer {
  padding: $edit-toolbar-margin;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  float: left;
}

/* The toolbar button group */
.edit-toolbar-button-group {
  padding: $general_margin_1 / 3;
}

/* The edit toolbar buttons */
.edit-toolbar-button-group > .btn {
  margin-left: 1px; /* This will show a line between buttons in the groups */
}

/* On smaller screens, where height is less than 450px, change the style of the toolbar (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .edit-toolbar {
    padding-top: 15px;
  }
  .edit-toolbar a {
    font-size: 18px;
  }
}