<div id="token-action-hud-form" class="standard-form">
    <div class="standard-form scrollable">
        <div class="form-group">
                <label>{{localize "tokenActionHud.settings.customStyle.form.backgroundColor.label"}}</label>
                <div class="form-fields">
                    <input type="text" id="backgroundColor" name="backgroundColor" data-color-picker="{required: false, alphaChannel:true, format:'hexa'}" value="{{backgroundColor}}">
                </div>
            </div>
        <fieldset>
            <legend>
                <span>{{localize "tokenActionHud.settings.customStyle.form.buttons"}}</span>
            </legend>
            <div class="form-group">
                <label>
                    {{localize "tokenActionHud.settings.customStyle.form.buttonHeight.label"}}
                    <span class="units">{{localize "tokenActionHud.settings.customStyle.form.buttonHeight.units"}}</span>
                </label>
                <div class="form-fields">
                    <input type="number" name="buttonHeight" value="{{buttonHeight}}" />
                </div>
            </div>
            <div class="form-group">
                <label>{{localize "tokenActionHud.settings.customStyle.form.buttonBackgroundColor.label"}}</label>
                <div class="form-fields">
                    <input type="text" id="buttonBackgroundColor" name="buttonBackgroundColor" data-color-picker="{required: false, alphaChannel:true, format:'hexa'}" value="{{buttonBackgroundColor}}">
                </div>
            </div>
            <div class="form-group">
                <label>{{localize "tokenActionHud.settings.customStyle.form.buttonBorderPrimaryColor.label"}}</label>
                <div class="form-fields">
                    <input type="text" id="buttonBorderPrimaryColor" name="buttonBorderPrimaryColor" data-color-picker="{required: false, alphaChannel:true, format:'hexa'}" value="{{buttonBorderPrimaryColor}}">
                </div>
            </div>
            <div class="form-group">
                <label>{{localize "tokenActionHud.settings.customStyle.form.buttonBorderSecondaryColor.label"}}</label>
                <div class="form-fields">
                    <input type="text" id="buttonBorderSecondaryColor" name="buttonBorderSecondaryColor" data-color-picker="{required: false, alphaChannel:true, format:'hexa'}" value="{{buttonBorderSecondaryColor}}">
                </div>
            </div>
            <div class="form-group">
                <label>{{localize "tokenActionHud.settings.customStyle.form.buttonTextColor.label"}}</label>
                <div class="form-fields">
                    <input type="text" id="buttonTextColor" name="buttonTextColor" data-color-picker="{required: false, alphaChannel:true, format:'hexa'}" value="{{buttonTextColor}}">
                </div>
            </div>
            <fieldset>
                <legend>
                    <span>{{localize "tokenActionHud.settings.customStyle.form.hovered"}}</span>
                </legend>
                <div class="form-group">
                    <label>{{localize "tokenActionHud.settings.customStyle.form.buttonHoverBackgroundColor.label"}}</label>
                    <div class="form-fields">
                        <input type="text" id="buttonHoverBackgroundColor" name="buttonHoverBackgroundColor" data-color-picker="{required: false, alphaChannel:true, format:'hexa'}" value="{{buttonHoverBackgroundColor}}">
                    </div>
                </div>
                <div class="form-group">
                    <label>{{localize "tokenActionHud.settings.customStyle.form.buttonHoverBorderPrimaryColor.label"}}</label>
                    <div class="form-fields">
                        <input type="text" id="buttonHoverBorderPrimaryColor" name="buttonHoverBorderPrimaryColor"data-color-picker="{required: false, alphaChannel:true, format:'hexa'}" value="{{buttonHoverBorderPrimaryColor}}" >
                    </div>
                </div>
                <div class="form-group">
                    <label>{{localize "tokenActionHud.settings.customStyle.form.buttonHoverBorderSecondaryColor.label"}}</label>
                    <div class="form-fields">
                        <input type="text" id="buttonHoverBorderSecondaryColor" name="buttonHoverBorderSecondaryColor" data-color-picker="{required: false, alphaChannel:true, format:'hexa'}" value="{{buttonHoverBorderSecondaryColor}}">
                    </div>
                </div>
                <div class="form-group">
                    <label>{{localize "tokenActionHud.settings.customStyle.form.buttonHoverTextColor.label"}}</label>
                    <div class="form-fields">
                        <input type="text" id="buttonHoverTextColor" name="buttonHoverTextColor" data-color-picker="{required: false, alphaChannel:true, format:'hexa'}" value="{{buttonHoverTextColor}}">
                    </div>
                </div>
            </fieldset>
            <fieldset>
                <legend>
                    <span>{{localize "tokenActionHud.settings.customStyle.form.toggleable"}}</span>
                </legend>
                <fieldset>
                    <legend>
                        <span>{{localize "tokenActionHud.settings.customStyle.form.active"}}</span>
                    </legend>
                    <div class="form-group">
                        <label>{{localize "tokenActionHud.settings.customStyle.form.buttonToggleActiveBackgroundColor.label"}}</label>
                        <div class="form-fields">
                            <input type="text" id="buttonToggleActiveBackgroundColor" name="buttonToggleActiveBackgroundColor" data-color-picker="{required: false, alphaChannel:true, format:'hexa'}" value="{{buttonToggleActiveBackgroundColor}}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label>{{localize "tokenActionHud.settings.customStyle.form.buttonToggleActiveBorderPrimaryColor.label"}}</label>
                        <div class="form-fields">
                            <input type="text" id="buttonToggleActiveBorderPrimaryColor" name="buttonToggleActiveBorderPrimaryColor" data-color-picker="{required: false, alphaChannel:true, format:'hexa'}" value="{{buttonToggleActiveBorderPrimaryColor}}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label>{{localize "tokenActionHud.settings.customStyle.form.buttonToggleActiveBorderSecondaryColor.label"}}</label>
                        <div class="form-fields">
                            <input type="text" id="buttonToggleActiveBorderSecondaryColor" name="buttonToggleActiveBorderSecondaryColor" data-color-picker="{required: false, alphaChannel:true, format:'hexa'}" value="{{buttonToggleActiveBorderSecondaryColor}}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label>{{localize "tokenActionHud.settings.customStyle.form.buttonToggleActiveTextColor.label"}}</label>
                        <div class="form-fields">
                            <input type="text" id="buttonToggleActiveTextColor" name="buttonToggleActiveTextColor" data-color-picker="{required: false, alphaChannel:true, format:'hexa'}" value="{{buttonToggleActiveTextColor}}">
                        </div>
                    </div>
                </fieldset>
                <fieldset>
                    <legend>
                        <span>{{localize "tokenActionHud.settings.customStyle.form.hovered"}}</span>
                    </legend>
                    <div class="form-group">
                        <label>{{localize "tokenActionHud.settings.customStyle.form.buttonToggleHoverBackgroundColor.label"}}</label>
                        <div class="form-fields">
                            <input type="text" id="buttonToggleHovereBackgroundColor" name="buttonToggleHoverBackgroundColor" data-color-picker="{required: false, alphaChannel:true, format:'hexa'}" value="{{buttonToggleHoverBackgroundColor}}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label>{{localize "tokenActionHud.settings.customStyle.form.buttonToggleHoverBorderPrimaryColor.label"}}</label>
                        <div class="form-fields">
                            <input type="text" id="buttonToggleHoverBorderPrimaryColor" name="buttonToggleHoverBorderPrimaryColor" data-color-picker="{required: false, alphaChannel:true, format:'hexa'}" value="{{buttonToggleHoverBorderPrimaryColor}}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label>{{localize "tokenActionHud.settings.customStyle.form.buttonToggleHoverBorderSecondaryColor.label"}}</label>
                        <div class="form-fields">
                            <input type="text" id="buttonToggleHoverBorderSecondaryColor" name="buttonToggleHoverBorderSecondaryColor" data-color-picker="{required: false, alphaChannel:true, format:'hexa'}" value="{{buttonToggleHoverBorderSecondaryColor}}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label>{{localize "tokenActionHud.settings.customStyle.form.buttonToggleHoverTextColor.label"}}</label>
                        <div class="form-fields">
                            <input type="text" id="buttonToggleHoverTextColor" name="buttonToggleHoverTextColor" data-color-picker="{required: false, alphaChannel:true, format:'hexa'}" value="{{buttonToggleHoverTextColor}}">
                        </div>
                    </div>
                </fieldset>
            </fieldset>
        </fieldset>
        <fieldset>
            <legend>
                <span>{{localize "tokenActionHud.settings.customStyle.form.text"}}</span>
            </legend>
            <div class="form-group">
                <label>{{localize "tokenActionHud.settings.customStyle.form.textPrimaryColor.label"}}</label>
                <div class="form-fields">
                    <input type="text" id="textPrimaryColor" name="textPrimaryColor" data-color-picker="{required: false, alphaChannel:true, format:'hexa'}" value="{{textPrimaryColor}}">
                </div>
            </div>
            <div class="form-group">
                <label>{{localize "tokenActionHud.settings.customStyle.form.textSecondaryColor.label"}}</label>
                <div class="form-fields">
                    <input type="text" id="textSecondaryColor" name="textSecondaryColor" data-color-picker="{required: false, alphaChannel:true, format:'hexa'}" value="{{textSecondaryColor}}">
                </div>
            </div>
            <div class="form-group">
                <label>{{localize "tokenActionHud.settings.customStyle.form.textTertiaryColor.label"}}</label>
                <div class="form-fields">
                    <input type="text" id="textTertiaryColor" name="textTertiaryColor" data-color-picker="{required: false, alphaChannel:true, format:'hexa'}" value="{{textTertiaryColor}}">
                </div>
            </div>
            <fieldset>
                <legend>
                    <span>{{localize "tokenActionHud.settings.customStyle.form.hovered"}}</span>
                </legend>
                <div class="form-group">
                    <label>{{localize "tokenActionHud.settings.customStyle.form.textHoverPrimaryColor.label"}}</label>
                    <div class="form-fields">
                        <input type="text" id="textHoverPrimaryColor" name="textHoverPrimaryColor" data-color-picker="{required: false, alphaChannel:true, format:'hexa'}" value="{{textHoverPrimaryColor}}">
                    </div>
                </div>
                <div class="form-group">
                    <label>{{localize "tokenActionHud.settings.customStyle.form.textHoverSecondaryColor.label"}}</label>
                    <div class="form-fields">
                        <input type="text" id="textHoverSecondaryColor" name="textHoverSecondaryColor" data-color-picker="{required: false, alphaChannel:true, format:'hexa'}" value="{{textHoverSecondaryColor}}">
                    </div>
                </div>
                <div class="form-group">
                    <label>{{localize "tokenActionHud.settings.customStyle.form.textHoverTertiaryColor.label"}}</label>
                    <div class="form-fields">
                        <input type="text" id="textHoverTertiaryColor" name="textHoverTertiaryColor" data-color-picker="{required: false, alphaChannel:true, format:'hexa'}" value="{{textHoverTertiaryColor}}">
                    </div>
                </div>
            </fieldset>
        </fieldset>
    </div>
    <footer class="form-footer" data-application-part="footer">
        <button type="button" data-action="reset" class="reset-button bright">
            <i class="fas fa-arrow-rotate-left"></i>{{localize "tokenActionHud.resetToDefault"}}
        </button>
        <button type="submit" class="save-button">
            <i class="fas fa-solid fa-floppy-disk"></i>{{localize "tokenActionHud.saveAndClose"}}
        </button>
    </footer>
</div>
