.dijitTextBox {
    background-color: $textbox-normal-bgcolor;
    padding: 0 $field-padding;
    border: $textbox-normal-border;

    .dijitArrowButton {
        height: $field-height-md;
        width: $field-height-md;
        background-color: $textbox-normal-arrow-bgcolor;
        border-left: $textbox-normal-arrow-border;

        &:before {
            // TODO: add option so user can add image icon
            @include create-arrow($textbox-arrow-size, $textbox-normal-arrow-color);
        }
    }

    &Hover,
    &:hover {
        background-color: $textbox-hover-bgcolor;
        border: $textbox-hover-border;

        .dijitInputInner {
            color: $textbox-hover-textcolor;
        }

        .dijitArrowButton {
            background-color: $textbox-hover-arrow-bgcolor;
            border-left: $textbox-hover-arrow-border;

            &:before {
                border-top-color: $textbox-hoverarrow-arrow-color;
            }
        }

        .dijitDownArrowButtonHover {
            background-color: $textbox-hoverarrow-arrow-bgcolor;
            border-left: $textbox-hoverarrow-arrow-border;

            &:before {
                border-top-color: $textbox-hoverarrow-arrow-color;
            }
        }
    }

    &Focused,
    &:focus {
        border: $textbox-focused-border;
        background-color: $textbox-focused-bgcolor;
        @include field-focus;

        .dijitInputInner {
            color: $textbox-focused-textcolor;
        }

        .dijitArrowButton {
            background-color: $white;
            border-left: $textbox-focused-arrow-border;

            &:before {
                @include create-arrow($textbox-arrow-size, $textbox-focused-arrow-color);
            }
        }

        .dijitDownArrowButtonHover {
            background-color: $textbox-focusedarrow-arrow-bgcolor;
            border-left: $textbox-focusedarrow-arrow-border;

            &:before {
                @include create-arrow($textbox-arrow-size, $textbox-focusedarrow-arrow-color);
            }
        }
    }

    &Disabled,
    &:disabled {
        border: $textbox-disabled-border;
        background-color: $textbox-disabled-bgcolor;

        .dijitArrowButton {
            background-color: $textbox-disabled-bgcolor;
            border-left: $textbox-disabled-arrow-border;

            &:before {
                @include create-arrow($textbox-arrow-size, $textbox-disabled-arrow-color);
            }
        }

        .dijitPlaceHolder {
            color: $textbox-disabled-textcolor;
        }

        .dijitInputInner {
            color: $textbox-disabled-textcolor;
        }
    }

    &Error {
        border: $field-error-border;

        .dijitValidationContainer {
            margin-right: -#{$field-padding};
        }

        .dijitArrowButton {
            border-left: $field-error-border;

            &:before {
                border-top-color: $error;
            }
        }
    }

    .dijitDownArrowButtonActive {
        background-color: $spinner-activearrow-arrow-bgcolor;
        border-left: $spinner-activearrow-arrow-border;

        &:before {
            border-top-color: $spinner-activearrow-arrow-color;
        }
    }
}
