// ==========================================================================
// Fields - Signature
// ==========================================================================

.fui-type-signature .fui-input-wrapper {
    position: relative;

    canvas {
        width: var(--fui-signature-width);
        height: var(--fui-signature-height);
        border: var(--fui-signature-border, 1px solid var(--fui-border-color));
        background: var(--fui-signature-bg);
        border-radius: var(--fui-signature-border-radius, var(--fui-border-radius));
    }

    .fui-signature-clear-btn {
        position: absolute;
        top: var(--fui-signature-remove-btn-top);
        right: var(--fui-signature-remove-btn-right);
        transform: var(--fui-signature-remove-btn-transform);
        border-radius: var(--fui-signature-remove-btn-border-radius);
        height: var(--fui-signature-remove-btn-height);
        width: var(--fui-signature-remove-btn-width);
        padding: var(--fui-signature-remove-btn-padding);
        text-indent: var(--fui-signature-remove-btn-text-indent);
        border: var(--fui-signature-remove-btn-border, 1px solid var(--fui-border-color));

        &::after {
            content: '';
            position: absolute;
            top: var(--fui-signature-remove-btn-icon-top);
            left: var(--fui-signature-remove-btn-icon-left);
            width: var(--fui-signature-remove-btn-icon-width);
            height: var(--fui-signature-remove-btn-icon-height);
            transform: var(--fui-signature-remove-btn-icon-transform);
            display: block;
            background-repeat: no-repeat;
            background-image: var(--fui-signature-remove-btn-icon-bg-image);
        }
    }
}
