.canvas {
    @include variant-support(Canvas);
    /* Define component properties */
    --joy-Canvas-radius: var(--joy-radius-sm);
    --joy-Canvas-focusedThickness: var(--joy-focus-thickness);
    --joy-Canvas-focusedHighlight: var(--joy-palette-primary-solidBg);

    /* Apply component properties */
    color: var(--joy-Canvas-Color);
    background-color: var(
        --joy-Canvas-Bg,
        var(--joy-palette-background-surface)
    );
    border-color: var(--joy-Canvas-Border);
    border-width: var(--joy-Canvas-borderWidth);
    border-style: var(--joy-Canvas-borderStyle);
    border-radius: var(--joy-Canvas-radius);

    &:hover {
        --joy-Canvas-Border: var(
            --joy-variant-HoverBorder,
            var(--joy-Canvas-default-HoverBorder)
        );
    }

    &:disabled {
        @include component-state(Canvas, Disabled);

        pointer-events: none;
        cursor: default;
    }

    &[psc='Joy/Variant/plain'],
    &[psc='Joy/Variant/outlined'] {
        --joy-Canvas-Bg: var(--joy-palette-background-surface);
    }

    &:focus-within,
    &:active {
        outline-width: var(--joy-Canvas-focusedThickness);
        outline-style: solid;
        outline-color: var(--joy-Canvas-focusedHighlight);
        outline-offset: min(
            calc(var(--joy-Canvas-borderWidth, 0px) * -1),
            -1px
        );
    }
}

.ia-signature-pad-canvas-wrapper {
    overflow: visible !important;
}