/**
 * Creates the base structure of trigger field.
 * @member Ext.form.field.Trigger
 */
@mixin extjs-form-triggerfield {
    .#{$prefix}form-trigger-wrap {
        vertical-align: top;
    }

    .#{$prefix}form-trigger {
        background-image: theme-background-image($theme-name, 'form/trigger.gif');
		background-position: 0 0;

		width: $form-trigger-width;
		height: $form-trigger-height - $form-trigger-border-bottom-width;

		border-bottom: $form-trigger-border-bottom;

        cursor: pointer;
        cursor: hand;
        overflow: hidden;
    }

    .#{$prefix}border-box .#{$prefix}form-trigger {
        height: $form-trigger-height;
    }

    .#{$prefix}field-default-toolbar .#{$prefix}form-trigger {
        height: $form-toolbar-trigger-height - $form-trigger-border-bottom-width;
    }

    .#{$prefix}border-box .#{$prefix}field-default-toolbar .#{$prefix}form-trigger {
        height: $form-toolbar-trigger-height;
    }


    .#{$prefix}form-trigger-over {
		background-position: -$form-trigger-width 0;

		border-bottom-color: $form-trigger-border-bottom-color-over;
    }

    .#{$prefix}form-trigger-wrap-focus .#{$prefix}form-trigger {
		background-position: -($form-trigger-width * 3) 0;

		border-bottom-color: $form-trigger-border-bottom-color-focus;
    }

    .#{$prefix}form-trigger-wrap-focus .#{$prefix}form-trigger-over {
        background-position: -($form-trigger-width * 4) 0;

        @if $form-trigger-border-bottom-color-focus-over {
            border-bottom-color: $form-trigger-border-bottom-color-focus-over;
        }
    }

    .#{$prefix}form-trigger-click,
    .#{$prefix}form-trigger-wrap-focus .#{$prefix}form-trigger-click {
		background-position: -($form-trigger-width * 2) 0;

		@if $form-trigger-border-bottom-color-pressed {
    		border-bottom-color: $form-trigger-border-bottom-color-pressed;
    	}
    }

    .#{$prefix}form-trigger-icon {
        height: $form-trigger-width - $form-trigger-border-bottom-width;

        background-repeat: no-repeat;
        background-position: $form-trigger-icon-background-position;
    }

    .#{$prefix}pickerfield-open {
        .#{$prefix}form-field {
            @include border-bottom-radius(0);
        }
    }

    .#{$prefix}pickerfield-open-above {
        .#{$prefix}form-field {
            @include border-bottom-left-radius(3px);
            @include border-top-radius(0);
        }
    }

    .#{$prefix}form-arrow-trigger {
        .#{$prefix}form-trigger-icon {
            background-image: theme-background-image($theme-name, 'boundlist/trigger-arrow.png');
        }
    }

    .#{$prefix}form-date-trigger {
        background-image: theme-background-image($theme-name, 'form/date-trigger.gif');
    }

    $spinner-btn-height: $form-trigger-height / 2;
    .#{$prefix}form-trigger-wrap {
        .#{$prefix}form-spinner-up,
        .#{$prefix}form-spinner-down {
            background-image: theme-background-image($theme-name, 'form/spinner.gif');

            width: $form-trigger-width !important;
            height: $spinner-btn-height !important;

            font-size: 0; /*for IE*/

            border-bottom: 0;
        }
        .#{$prefix}form-spinner-down {
            background-position: 0 (-$spinner-btn-height);
        }
    }
    .#{$prefix}form-trigger-wrap-focus .#{$prefix}form-spinner-down {
        background-position: -($form-trigger-width * 3) (-$spinner-btn-height);
    }
    .#{$prefix}form-trigger-wrap .#{$prefix}form-spinner-down-over {
        background-position: (-$form-trigger-width) (-$spinner-btn-height);
    }
    .#{$prefix}form-trigger-wrap-focus .#{$prefix}form-spinner-down-over {
        background-position: -($form-trigger-width * 4) (-$spinner-btn-height);
    }
    .#{$prefix}form-trigger-wrap .#{$prefix}form-spinner-down-click {
        background-position: -($form-trigger-width * 2) (-$spinner-btn-height);
    }


    .#{$prefix}field-default-toolbar {
        $spinner-btn-height: $form-toolbar-trigger-height / 2;
        .#{$prefix}form-trigger-wrap {
            .#{$prefix}form-spinner-up,
            .#{$prefix}form-spinner-down {
               background-image: theme-background-image($theme-name, 'form/spinner-small.gif');
                height: $spinner-btn-height !important;
            }
            .#{$prefix}form-spinner-down {
                background-position: 0 (-$spinner-btn-height);
            }
        }
        .#{$prefix}form-trigger-wrap-focus .#{$prefix}form-spinner-down {
            background-position: -($form-trigger-width * 3) (-$spinner-btn-height);
        }
        .#{$prefix}form-trigger-wrap .#{$prefix}form-spinner-down-over {
            background-position: (-$form-trigger-width) (-$spinner-btn-height);
        }
        .#{$prefix}form-trigger-wrap-focus .#{$prefix}form-spinner-down-over {
            background-position: -($form-trigger-width * 4) (-$spinner-btn-height);
        }
        .#{$prefix}form-trigger-wrap .#{$prefix}form-spinner-down-click {
            background-position: -($form-trigger-width * 2) (-$spinner-btn-height);
        }
    }


    .#{$prefix}trigger-noedit {
        cursor: pointer;
        cursor: hand;
    }

    .#{$prefix}item-disabled {
        .#{$prefix}trigger-noedit, .#{$prefix}form-trigger {
          cursor: auto;
        }
    }


    .#{$prefix}form-clear-trigger {
        background-image: theme-background-image($theme-name, 'form/clear-trigger.gif');
    }
    .#{$prefix}form-search-trigger {
        background-image: theme-background-image($theme-name, 'form/search-trigger.gif');
    }

    @if $include-ie {
        // in IE6 quirks, the table cell enclosing the trigger field's input element does not shrink to fit,
        // so it is necessary to set the height of the table cell.
        .#{$prefix}quirks .#{prefix}ie6 {
            .#{$prefix}form-trigger-input-cell {
                height: $form-field-height;
            }
            .#{$prefix}field-default-toolbar .#{$prefix}form-trigger-input-cell {
                height: $form-toolbar-field-height;
            }
        }
    }
}