    @import '../global';

    /**
     * @class Ext.field.Field
     */

    /**
     * @var {color} $toolbar-input-bg
     * Background-color for toolbar form fields.
     */
    $toolbar-input-bg: #fff !default;

    /**
     * @var {color} $toolbar-input-color
     * Text color for toolbar form fields.
     */
    $toolbar-input-color: #000 !default;

    /**
     * @var {measurement} $toolbar-input-height
     * Text color for toolbar form fields.
     */
    $toolbar-input-height: 1.6em !default;

    /**
     * @var {color} $toolbar-input-border-color
     * Border color for toolbar form fields.
     */
    $toolbar-input-border-color: rgba(#000, .5) !default;

    // Private
    $toolbar-select-overflow-mask-width: 3em;
    $toolbar-search-left-padding: 1.67em;

    /**
     * Includes default toolbar form field styles.
     *
     * @member Ext.tab.Bar
     */
    @mixin sencha-toolbar-forms {

      .x-desktop .x-toolbar {
        .x-input-search {
          margin-left: ($toolbar-search-left-padding - .61em);
        }
      }

      //so disabled fields are still dark
      .x-spinner .x-input-el,
      .x-field-select .x-input-el {
        -webkit-text-fill-color: #000;
        -webkit-opacity: 1;
      }

      .x-spinner.x-item-disabled .x-input-el,
      .x-field-select.x-item-disabled .x-input-el {
        -webkit-text-fill-color: currentcolor;
      }

      //and inside toolbars
      .x-toolbar .x-field-select .x-input-el {
        -webkit-text-fill-color: #fff;
      }

      .x-toolbar .x-field-select .x-item-disabled .x-input-el {
        -webkit-text-fill-color: rgba(255,255,255,.6);
      }

      .x-toolbar {
        .x-form-field-container {
          @if $include-border-radius { padding: 0 .3em; }
        }

        .x-field {
          width: 13em;
          margin: .5em;
          min-height: 0;
          border-bottom: 0;

          .x-clear-icon {
            margin: 0 .3em 0 0;
            width: 1em;
            height: 1em;
            line-height: .8em;
          }
        }

        .x-field-text,
        .x-field-number,
        .x-field-search {
          .x-component-outer {
            @if $include-border-radius { @include border-radius(.3em); }
            background-color: $toolbar-input-bg;

            @if $include-highlights {
              -webkit-box-shadow: inset $toolbar-input-border-color 0 .1em 0, inset $toolbar-input-border-color 0 -.1em 0, inset $toolbar-input-border-color .1em 0 0, inset $toolbar-input-border-color -.1em 0 0, inset rgba(#000, .5) 0 .15em .4em;
            }
          }
        }

        .x-form-label {
          background: transparent;
          border: 0;
          padding: 0;
          line-height: 1.4em;
        }

        .x-form-field {
          height: $toolbar-input-height;
          color: lighten($toolbar-input-color, 43%);
          background: transparent;
          min-height: 0;
          -webkit-appearance: none;
          padding: 0em .3em;
          margin: 0;

          &:focus {
            color: $toolbar-input-color;
          }
        }

        .x-field-select,
        .x-field-search {
          .x-component-outer {
            @if $include-border-radius { @include border-radius($toolbar-input-height/2); }
          }
        }

        .x-field-search {
          .x-field-input {
            background-position: .5em 50%;
          }
        }

        .x-field-select {
          -webkit-box-shadow: none;

          .x-form-field {
            height: 1.4em;
          }
        }

        .x-field-select {
          background: transparent;

          .x-component-outer {
            &:after {
              top: -.5em;
              right: -.5em;
            }
          }

          &.x-item-disabled {
            .x-component-outer:after {
              opacity: .6;
            }
          }

          // Background is set in _toolbar file
          .x-component-outer:before {
            width: $toolbar-select-overflow-mask-width;
            border-left: none;
            @if $include-border-radius { @include border-right-radius($toolbar-input-height/2); }
            @if $include-highlights {
                -webkit-mask: theme_image($theme-name, "select_mask.png");
                -webkit-mask-position: right top;
                -webkit-mask-repeat: repeat-y;
                -webkit-mask-size: $toolbar-select-overflow-mask-width .05em;
            }
            @else {
                width: 0.5em !important;
            }
          }

          .x-input-text {
            color: #fff;
          }
        }
      }

      .x-android .x-field-search .x-field-input .x-form-field {
        margin-left: $toolbar-search-left-padding;
      }
    }