@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 {
  //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;
      background: transparent;

      .x-clear-icon {
        background-size: 50% 50%;
        right: -0.8em;
        margin-top: -1.06em;
      }
    }

    .x-field-input {
      padding-right: 1.6em !important;
    }

    .x-field-textarea,
    .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 {
          right: .4em;
        }
      }

      &.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 {
    padding-left: .2em !important;
    padding-right: 2.2em !important;
  }
}