//
// Copyright (c) Tiny Technologies, Inc. All rights reserved.
// Licensed under the LGPL or a commercial license.
// For LGPL see License.txt in the project root for license information.
// For commercial licenses see https://www.tiny.cloud/
//

/* Note, this file is imported inside .tinymce-mobile-context-toolbar, so that prefix is on everything here. */

.tinymce-mobile-toolbar-group {
  @import "serialised-dialogs";
  @import "slider";
  .mixin-flex-bar;

  flex: 1;
  padding-bottom: .4em;
  padding-top: .4em;

  .tinymce-mobile-serializer-wrapper,
  & > div {
    .mixin-flex-bar;

    flex: 1;
  }

  .tinymce-mobile-serializer-wrapper {
    flex-direction: column;
    justify-content: center;
  }

  /* Make any buttons appearing on the left and right display in the centre (e.g. color edges) */
  .tinymce-mobile-toolbar-group-item {
    align-items: center;
    display: flex;
  }

  /* For widgets like the colour picker, use the whole height */
  .tinymce-mobile-toolbar-group-item:not(.tinymce-mobile-serialised-dialog) {
    height: 100%;
  }

  .tinymce-mobile-dot-container {
    display: flex;
  }

  input {
    background: @toolstrip-input-background-color;
    border: none;
    border-radius: 0;
    color: @toolstrip-input-foreground-color;
    flex-grow: 1;
    font-size: .85em;
    padding-bottom: .1em;
    padding-left: 5px;
    padding-top: .1em;

    &::placeholder {
      /* WebKit, Blink, Edge */
      color: @toolstrip-input-placeholder-foreground-color;
    }
  }
}