#toolbar {
  display: flex;
  align-items: center;
  gap: 2 * $default-padding;
  z-index: 10;
  @extend %gradiated-toolbar;
  margin-right: 0px;
  border-bottom: $default-border;
  position: relative;

  .toolbar_button {
    form {
      margin: 0;
      display: inline-flex;
      align-items: center;
    }
  }

  div p {
    float: right;
    margin: 3px $default-margin 0 0;
    padding: 0;
  }
}

.toolbar_buttons {
  display: flex;
  flex-grow: 1;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;

  @media screen and (min-width: $medium-screen-break-point) {
    overflow: visible;
  }

  &.right {
    flex-grow: 0;
    padding: 8px 0;

    .toolbar_button {
      &:last-child {
        margin-right: $default-margin;
      }
    }
  }

  .icon_button {
    .icon {
      width: var(--icon-size-xl);
      height: var(--icon-size-xl);
    }
  }

  .toolbar_button {
    margin: 0 2 * $default-margin;

    &:first-child {
      margin-left: $default-margin;

      select,
      .alchemy_selectbox {
        margin-left: 2 * $default-margin;
      }
    }
  }
}

.toolbar_spacer {
  display: inline-block;
  vertical-align: middle;
  width: 0px;
  height: 29px;
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: $default-border-color;
  margin-right: $default-margin;
  margin-left: $default-margin;
}

#overlay_toolbar {
  @extend %gradiated-toolbar;
  border-bottom: $default-border;
}

.button_group {
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin: 0 2 * $default-margin;

  &:hover label {
    display: block;
  }

  .toolbar_button {
    margin: 0;
  }
}