:root,
ti-chat {
    /* Custom Variables
    Those can/should be overwritten in a ti_base_<project>

    Chatbot:
        --ti-chat-custom-primary
        --ti-chat-custom-on-primary
        --ti-chat-custom-secondary
        --ti-chat-custom-on-secondary
        --ti-chat-custom-tertiary
        --ti-chat-custom-on-tertiary
        --ti-chat-custom-action-color
        --ti-chat-custom-on-action-color
        --ti-chat-custom-error
        --ti-chat-custom-on-error

        --ti-chat-custom-surface
        --ti-chat-custom-on-surface
        --ti-chat-custom-on-surface-variant
        --ti-chat-custom-surface-container
        --ti-chat-custom-outline
        --ti-chat-custom-input-background
        --ti-chat-custom-input-color

        --ti-chat-custom-fontsize
        --ti-chat-custom-hint-fontsize
        --ti-chat-custom-margin
        --ti-chat-custom-box-shadow
        --ti-chat-custom-radius
        --ti-chat-custom-radius-sm
        --ti-chat-custom-focus-color
        --ti-chat-custom-focus-width
        --ti-chat-custom-focus-style
        --ti-chat-custom-input-border-width
        --ti-chat-custom-input-border-style

    Popup:
        --ti-popup-custom-button-color
        --ti-popup-custom-modal-footer-fontsize
        --ti-popup-custom-modal-shadow
        --ti-popup-custom-button-fontsize
        --ti-popup-button-size
        --ti-popup-modal-width
        --ti-popup-button-right
        --ti-popup-button-bottom
        --ti-popup-header-height
        --ti-popup-background-img
        --ti-popup-background-img-light
    */
    /*  Chatbot-Core documentation at: https://github.com/thammit/ti-studio-chat/blob/main/README.md#styling

    */

    /* Defautl-Werte definieren */

    --ti-chat-default-primary: var(--bs-grau-02, rgb(64, 64, 64));
    --ti-chat-default-background-color: rgb(234, 234, 234);
    --ti-chat-default-background-variant: rgb(221, 221, 221);
    --ti-chat-default-white: var(--bs-white, rgb(255, 255, 255));
    --ti-chat-default-black: var(--bs-black, rgb(34, 34, 34));
    --ti-chat-default-red: var(--bs-red, rgb(184, 15, 34));

    --ti-chat-default-margin: 0;
    --ti-chat-default-fontsize: 16px;
    --ti-chat-default-fontsize-small: 14px;
    --ti-chat-default-radius: 0.75rem;
    --ti-chat-default-radius-sm: 0.5rem;

    --ti-chat-default-border: none;
    --ti-chat-default-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);

    --ti-chat-default-focus-width: 4px;
    --ti-chat-default-focus-style: solid;

    /* Chatbot-Variablen setzen */

    --ti-chat-primary: var(
        --ti-chat-custom-primary,
        var(--ti-chat-default-primary)
    );
    --ti-chat-on-primary: var(
        --ti-chat-custom-on-primary,
        var(--ti-chat-default-white)
    );
    --ti-chat-secondary: var(
        --ti-chat-custom-secondary,
        var(--ti-chat-default-white)
    );
    --ti-chat-on-secondary: var(
        --ti-chat-custom-on-secondary,
        var(--ti-chat-default-black)
    );
    --ti-chat-tertiary: var(
        --ti-chat-custom-tertiary,
        var(--ti-chat-default-white)
    );
    --ti-chat-on-tertiary: var(
        --ti-chat-custom-on-tertiary,
        var(--ti-chat-default-black)
    );
    --ti-chat-action-color: var(
        --ti-chat-custom-action-color,
        var(--ti-chat-default-background-color)
    );
    --ti-chat-on-action-color: var(
        --ti-chat-custom-on-action-color,
        var(--ti-chat-default-black)
    );
    --ti-chat-error: var(--ti-chat-custom-error, var(--ti-chat-default-red));
    --ti-chat-on-error: var(
        --ti-chat-custom-on-error,
        var(--ti-chat-default-white)
    );

    --ti-chat-surface: var(
        --ti-chat-custom-surface,
        var(--ti-chat-default-background-color)
    );
    --ti-chat-on-surface: var(
        --ti-chat-custom-on-surface,
        var(--ti-chat-default-black)
    );
    --ti-chat-on-surface-variant: var(
        --ti-chat-custom-on-surface-variant,
        var(--ti-chat-default-black)
    );
    --ti-chat-surface-container: var(
        --ti-chat-custom-surface-container,
        var(--ti-chat-default-background-variant)
    );
    --ti-chat-outline: var(
        --ti-chat-custom-outline,
        var(--ti-chat-default-border)
    );
    --ti-chat-input-background: var(
        --ti-chat-custom-input-background,
        var(--ti-chat-tertiary)
    );
    --ti-chat-input-color: var(
        --ti-chat-custom-input-color,
        var(--ti-chat-on-tertiary)
    );

    --ti-chat-fontsize: var(
        --ti-chat-custom-fontsize,
        var(--ti-chat-default-fontsize)
    );
    --ti-chat-hint-fontsize: var(
        --ti-chat-custom-hint-fontsize,
        var(--ti-chat-default-fontsize-small)
    );
    --ti-chat-margin: var(
        --ti-chat-custom-margin,
        var(--ti-chat-default-margin)
    );
    --ti-chat-box-shadow: var(
        --ti-chat-custom-box-shadow,
        var(--ti-chat-default-shadow)
    );
    --ti-chat-radius: var(
        --ti-chat-custom-radius,
        var(--ti-chat-default-radius)
    );
    --ti-chat-radius-sm: var(
        --ti-chat-custom-radius-sm,
        var(--ti-chat-default-radius-sm)
    );
    --ti-chat-focus-color: var(
        --ti-chat-custom-focus-color,
        var(--ti-chat-default-primary)
    );
    --ti-chat-focus-width: var(
        --ti-chat-custom-focus-width,
        var(--ti-chat-default-focus-width)
    );
    --ti-chat-focus-style: var(
        --ti-chat-custom-focus-style,
        var(--ti-chat-default-focus-style)
    );
    --ti-chat-input-border-width: var(
        --ti-chat-custom-input-border-width,
        var(--ti-chat-default-focus-width)
    );
    --ti-chat-input-border-style: var(
        --ti-chat-custom-input-border-style,
        var(--ti-chat-default-focus-style)
    );

    /* new variables*/

    --ti-popup-button-color: var(
        --ti-popup-custom-button-color,
        var(--ti-chat-default-white)
    );
    --ti-popup-modal-footer-fontsize: var(
        --ti-popup-custom-modal-footer-fontsize,
        var(--ti-chat-hint-fontsize)
    );
    --ti-popup-modal-shadow: var(
        --ti-popup-custom-modal-shadow,
        0 10px 30px rgba(0, 0, 0, 0.15)
    );
    --ti-popup-button-fontsize: var(--ti-popup-custom-button-fontsize, 130%);
    --ti-popup-button-size: var(--ti-popup-custom-button-size, 4rem);
    --ti-popup-modal-width: var(--ti-popup-custom-modal-width, 30%);
    --ti-popup-button-right: var(--ti-popup-custom-button-right, 0.5rem);
    --ti-popup-button-bottom: var(--ti-popup-custom-button-bottom, 5rem);
    --ti-popup-header-height: var(--ti-popup-custom-header-height, 4rem);
    --ti-popup-background-img: var(
        --ti-popup-custom-background-img,
        url("/wp-content/plugins/ti_chatbot/icons/ti-chatbot-btn-brand.svg")
    );
    --ti-popup-background-img-light: var(
        --ti-popup-custom-background-img-light,
        url("/wp-content/plugins/ti_chatbot/icons/ti-chatbot-btn-light.svg")
    );
}