@import './style.css';

:root {
    --tvm-connect-color: var(--global-color, #383838);
    --tvm-connect-emphasis-color: var(--global-emphasis-color, #333);
    --tvm-connect-muted-color: var(--global-muted-color, #7698bb);
    --tvm-connect-link-color: var(--global-link-color, #1e87f0);
    --tvm-connect-link-hover-color: var(--global-link-hover-color, #00a6ff);
    --tvm-connect-border: var(--global-border, #93b6d8);
    --tvm-connect-border-radius: var(--global-border-radius, 12px);

    /* Modal */
    --tvm-connect-modal-width: 380px;
    --tvm-connect-modal-background: var(--modal-background, #f7f9fb);
    --tvm-connect-modal-border-radius: 12px;
    --tvm-connect-modal-box-shadow: 0 8px 32px 0 rgb(63 74 111 / 12%), 0 1px 4px 0 rgb(63 74 111 / 8%);
    --tvm-connect-modal-color: var(--tvm-connect-color);
    --tvm-connect-modal-padding-horizontal: 24px;
    --tvm-connect-modal-padding-vertical: var(--tvm-connect-modal-padding-horizontal);
    --tvm-connect-modal-header-padding-horizontal: 0;
    --tvm-connect-modal-header-padding-vertical: var(--tvm-connect-modal-padding-vertical);
    --tvm-connect-modal-title-color: var(--tvm-connect-emphasis-color);
    --tvm-connect-modal-title-font-size: 20px;
    --tvm-connect-modal-title-font-weight: 500;
    --tvm-connect-modal-title-line-height: 24px;
    --tvm-connect-modal-body-padding-horizontal: 0;
    --tvm-connect-modal-body-padding-vertical: var(--tvm-connect-modal-padding-vertical);
    --tvm-connect-modal-footer-padding-horizontal: 0;
    --tvm-connect-modal-footer-padding-vertical: var(--tvm-connect-modal-padding-vertical);

    /* Drawer */
    --tvm-connect-drawer-content-background: var(--drawer-content-background, #f7f9fb);
    --tvm-connect-drawer-content-border-radius: 16px;
    --tvm-connect-drawer-content-box-shadow: 0 8px 32px 0 rgb(63 74 111 / 12%), 0 1px 4px 0 rgb(63 74 111 / 8%);
    --tvm-connect-drawer-content-color: var(--tvm-connect-color);
    --tvm-connect-drawer-content-padding-horizontal: 24px;
    --tvm-connect-drawer-content-padding-vertical: var(--tvm-connect-drawer-content-padding-horizontal);
    --tvm-connect-drawer-header-padding-horizontal: 0;
    --tvm-connect-drawer-header-padding-vertical: var(--tvm-connect-drawer-content-padding-vertical);
    --tvm-connect-drawer-title-color: var(--tvm-connect-emphasis-color);
    --tvm-connect-drawer-title-font-size: 22px;
    --tvm-connect-drawer-title-font-weight: 500;
    --tvm-connect-drawer-title-line-height: 26px;
    --tvm-connect-drawer-body-padding-horizontal: 0;
    --tvm-connect-drawer-body-padding-vertical: var(--tvm-connect-drawer-content-padding-vertical);
    --tvm-connect-drawer-footer-padding-horizontal: 0;
    --tvm-connect-drawer-footer-padding-vertical: var(--tvm-connect-drawer-content-padding-vertical);

    /* Connector */
    --tvm-connect-dropdown-trigger-horizontal-padding: 8px;
    --tvm-connect-dropdown-trigger-vertical-padding: 0;
    --tvm-connect-dropdown-background: var(--dropdown-background, #fff);
    --tvm-connect-dropdown-border-radius: 5px;
    --tvm-connect-dropdown-box-shadow: 0 8px 32px 0 rgb(63 74 111 / 12%), 0 1px 4px 0 rgb(63 74 111 / 8%);
    --tvm-connect-dropdown-color: var(--tvm-connect-emphasis-color);
    --tvm-connect-dropdown-link-color: var(--tvm-connect-muted-color, #0098ea);
    --tvm-connect-dropdown-link-hover-color: var(--tvm-connect-color, #00a6ff);

    /* Providers list */
    --tvm-connect-provider-button-background: var(--button-default-background, #e4eaf1);
    --tvm-connect-provider-button-hover-background: var(
        --button-default-hover-background,
        rgb(0 154.494955 232.2106 / 8%)
    );
    --tvm-connect-provider-button-hover-color: var(--tvm-connect-color);
    --tvm-connect-provider-button-border-width: 2px;
    --tvm-connect-provider-button-border-style: solid;
    --tvm-connect-provider-button-border: transparent;
    --tvm-connect-provider-button-hover-border: var(--button-default-hover-border, #07acff);
}