/* 
Theme Name: wynd website
Theme URI: https://github.com/wynd-de/wynd-website-theme/
Description: wynd website is a theme based on the Hello Elementor theme, enhanced with utility functions and features to kickstart a great website.
Author: wynd - Nicky GmbH
Author URI: https://wynd.de/
Version: 1.0.0
Text Domain: wynd-website
License: Proprietary - Company Use Only
License URI: https://github.com/wynd-de/wynd-website-theme/LICENSE.md
*/

/* 
**************
* variables that can be overwritten in the child theme by copying the variable
**************
*/
.wynd-website-kit {
    /* general */
    --transition-default: 0.3s ease-in-out;
    --font-size-responsive-factor-large: 0.6;
    --font-size-responsive-factor-medium: 0.9;

    /* checkbox and radio button */
    --color-checkbox-checked-background: var(--color-primary-main);
    --color-checkbox-checked-border: var(--color-primary-main);
    --color-checkbox-checkmark: var(--color-primary-text, #000000);
    --color-checkbox-disabled-checkmark: var(--color-gray-500, #969696);
    --color-checkbox-disabled-background: var(--color-gray-300, #d9d9d9);
    --color-checkbox-disabled-border: var(--color-gray-300, #d9d9d9);
    --color-checkbox-unchecked-background: var(--color-page-bg, #ffffff);
    --color-checkbox-unchecked-border: var(--color-gray-200, #e9e9e9);

    /* select */
    --border-width-select-icon: 2px;
    --size-select-icon: 10px;

    /* borlabs cookie */
    --dialog-animation-delay: 2s;
    --dialog-animation-duration: 1s;
    --dialog-backdrop-background-color: var(--color-black, #000000);
    --dialog-background-color: var(--color-white, #ffffff);
    --dialog-button-accept-all-color: var(--color-primary-main);
    --dialog-button-accept-all-color-hover: var(--color-primary-dark);
    --dialog-button-accept-all-text-color: var(--color-primary-text, #000000);
    --dialog-button-accept-all-text-color-hover: var(--color-primary-text, #000000);
    --dialog-button-accept-only-essential-color: transparent;
    --dialog-button-accept-only-essential-color-hover: transparent;
    --dialog-button-accept-only-essential-text-color: var(--color-text, #000000);
    --dialog-button-accept-only-essential-text-color-hover: var(--color-primary-dark);
    --dialog-button-close-color: transparent;
    --dialog-button-close-color-hover: transparent;
    --dialog-button-close-text-color: var(--color-text, #000000);
    --dialog-button-close-text-color-hover: var(--color-primary-dark);
    --dialog-button-preferences-color: transparent;
    --dialog-button-preferences-color-hover: transparent;
    --dialog-button-preferences-text-color: var(--color-text, #000000);
    --dialog-button-preferences-text-color-hover: var(--color-primary-dark);
    --dialog-button-save-consent-color: transparent;
    --dialog-button-save-consent-color-hover: transparent;
    --dialog-button-save-consent-text-color: var(--color-text, #000000);
    --dialog-button-save-consent-text-color-hover: var(--color-primary-dark);
    --dialog-button-selection-color: transparent;
    --dialog-button-selection-color-hover: transparent;
    --dialog-button-selection-text-color: var(--color-text, #000000);
    --dialog-button-selection-text-color-hover: var(--color-primary-dark);
    --dialog-checkbox-background-color-active: var(--color-checkbox-checked-background);
    --dialog-checkbox-background-color-disabled: var(--color-checkbox-disabled-background);
    --dialog-checkbox-background-color-inactive: var(--color-checkbox-unchecked-background);
    --dialog-checkbox-border-color-active: var(--color-checkbox-checked-border);
    --dialog-checkbox-border-color-disabled: var(--color-checkbox-disabled-border);
    --dialog-checkbox-border-color-inactive: var(--color-gray-300, #d9d9d9);
    --dialog-checkbox-check-mark-color-active: var(--color-checkbox-checkmark);
    --dialog-checkbox-check-mark-color-disabled: var(--color-checkbox-disabled-checkmark);
    --dialog-card-background-color: var(--color-gray-50, #f9f9f9);
    --dialog-card-control-element-color: var(--color-text, #000000);
    --dialog-card-control-element-color-hover: var(--color-text, #000000);
    --dialog-card-separator-color: var(--color-divider, #d9d9d9);
    --dialog-card-text-color: var(--color-text, #000000);
    --dialog-control-element-color: var(--color-text, #000000);
    --dialog-control-element-color-hover: var(--color-primary-dark);
    --dialog-footer-background-color: var(--color-gray-100, #f2f2f2);
    --dialog-footer-text-color: var(--color-text-secondary, #000000);
    --dialog-link-primary-color: var(--color-text, #000000);
    --dialog-link-primary-color-hover: var(--color-primary-dark);
    --dialog-link-secondary-color: var(--color-text-secondary, #000000);
    --dialog-link-secondary-color-hover: var(--color-primary-dark);
    --dialog-list-item-background-color-even: var(--color-white, #ffffff);
    --dialog-list-item-background-color-odd: var(--color-white, #ffffff);
    --dialog-list-item-text-color-even: var(--color-text-secondary, #000000);
    --dialog-list-item-text-color-odd: var(--color-text-secondary, #000000);
    --dialog-list-item-control-element-color: var(--color-text, #000000);
    --dialog-list-item-control-element-color-hover: var(--color-text, #000000);
    --dialog-list-item-control-element-separator-color: var(--color-divider, #d9d9d9);
    --dialog-list-item-separator-color: var(--color-divider, #d9d9d9);
    --dialog-search-bar-input-background-color: var(--color-input-bg, #ffffff);
    --dialog-search-bar-input-border-color-default: var(--color-input-border, #e9e9e9);
    --dialog-search-bar-input-border-color-focus: var(--color-primary-main);
    --dialog-search-bar-input-text-color: var(--color-text-secondary, #000000);
    --dialog-separator-color: var(--color-divider, #d9d9d9);
    --dialog-switch-button-background-color-active: var(--color-primary-main);
    --dialog-switch-button-background-color-inactive: var(--color-gray-200, #e9e9e9);
    --dialog-switch-button-color-active: var(--color-white, #ffffff);
    --dialog-switch-button-color-inactive: var(--color-white, #ffffff);
    --dialog-tab-bar-tab-background-color-active: var(--color-primary-main);
    --dialog-tab-bar-tab-background-color-inactive: transparent;
    --dialog-tab-bar-tab-border-color-bottom-active: var(--color-primary-main);
    --dialog-tab-bar-tab-border-color-bottom-inactive: var(--color-primary-main);
    --dialog-tab-bar-tab-border-color-left-active: transparent;
    --dialog-tab-bar-tab-border-color-left-inactive: transparent;
    --dialog-tab-bar-tab-border-color-right-active: transparent;
    --dialog-tab-bar-tab-border-color-right-inactive: transparent;
    --dialog-tab-bar-tab-border-color-top-active: transparent;
    --dialog-tab-bar-tab-border-color-top-inactive: transparent;
    --dialog-tab-bar-tab-text-color-active: var(--color-primary-text, #000000);
    --dialog-tab-bar-tab-text-color-inactive: var(--color-text-secondary, #000000);
    --dialog-table-row-background-color-even: var(--color-white, #ffffff);
    --dialog-table-row-background-color-odd: var(--color-white, #ffffff);
    --dialog-table-row-text-color-even: var(--color-text, #000000);
    --dialog-table-row-text-color-odd: var(--color-text, #000000);
    --dialog-table-row-border-color: var(--color-divider, #d9d9d9);
    --dialog-text-color: var(--color-text, #000000);
    --dialog-font-family: inherit;
    --dialog-border-radius-bottom-left: min(var(--border-radius-input), calc(var(--border-radius-button) * 2));
    --dialog-border-radius-bottom-right: min(var(--border-radius-input), calc(var(--border-radius-button) * 2));
    --dialog-border-radius-top-left: min(var(--border-radius-input), calc(var(--border-radius-button) * 2));
    --dialog-border-radius-top-right: min(var(--border-radius-input), calc(var(--border-radius-button) * 2));
    --dialog-button-border-radius-bottom-left: var(--border-radius-button);
    --dialog-button-border-radius-bottom-right: var(--border-radius-button);
    --dialog-button-border-radius-top-left: var(--border-radius-button);
    --dialog-button-border-radius-top-right: var(--border-radius-button);
    --dialog-card-border-radius-bottom-left: min(var(--border-radius-input), calc(var(--border-radius-button) * 2));
    --dialog-card-border-radius-bottom-right: min(var(--border-radius-input), calc(var(--border-radius-button) * 2));
    --dialog-card-border-radius-top-left: min(var(--border-radius-input), calc(var(--border-radius-button) * 2));
    --dialog-card-border-radius-top-right: min(var(--border-radius-input), calc(var(--border-radius-button) * 2));
    --dialog-card-list-padding-medium-screen-bottom: var(--padding-content-x-md, 32px);
    --dialog-card-list-padding-medium-screen-left: var(--padding-content-x-md, 32px);
    --dialog-card-list-padding-medium-screen-right: var(--padding-content-x-md, 32px);
    --dialog-card-list-padding-medium-screen-top: var(--padding-content-x-md, 32px);
    --dialog-card-list-padding-small-screen-bottom: var(--padding-content-x-sm, 16px);
    --dialog-card-list-padding-small-screen-left: var(--padding-content-x-sm, 16px);
    --dialog-card-list-padding-small-screen-right: var(--padding-content-x-sm, 16px);
    --dialog-card-list-padding-small-screen-top: var(--padding-content-x-sm, 16px);
    --dialog-checkbox-border-radius-bottom-left: var(--border-radius-checkbox);
    --dialog-checkbox-border-radius-bottom-right: var(--border-radius-checkbox);
    --dialog-checkbox-border-radius-top-left: var(--border-radius-checkbox);
    --dialog-checkbox-border-radius-top-right: var(--border-radius-checkbox);
    --dialog-font-size: var(--font-size-body-small);
    --dialog-list-border-radius-bottom-left: min(var(--border-radius-input), var(--border-radius-button));
    --dialog-list-border-radius-bottom-right: min(var(--border-radius-input), var(--border-radius-button));
    --dialog-list-border-radius-top-left: min(var(--border-radius-input), var(--border-radius-button));
    --dialog-list-border-radius-top-right: min(var(--border-radius-input), var(--border-radius-button));
    --dialog-list-item-separator-width: 1px;
    --dialog-list-padding-medium-screen-bottom: calc(var(--padding-content-x-md, 32px) / 2);
    --dialog-list-padding-medium-screen-left: calc(var(--padding-content-x-md, 32px) / 2);
    --dialog-list-padding-medium-screen-right: calc(var(--padding-content-x-md, 32px) / 2);
    --dialog-list-padding-medium-screen-top: calc(var(--padding-content-x-md, 32px) / 2);
    --dialog-list-padding-small-screen-bottom: calc(var(--padding-content-x-sm) / 2);
    --dialog-list-padding-small-screen-left: calc(var(--padding-content-x-sm) / 2);
    --dialog-list-padding-small-screen-right: calc(var(--padding-content-x-sm) / 2);
    --dialog-list-padding-small-screen-top: calc(var(--padding-content-x-sm) / 2);
    --dialog-search-bar-input-border-radius-bottom-left: min(var(--border-radius-input), var(--border-radius-button));
    --dialog-search-bar-input-border-radius-bottom-right: min(var(--border-radius-input), var(--border-radius-button));
    --dialog-search-bar-input-border-radius-top-left: min(var(--border-radius-input), var(--border-radius-button));
    --dialog-search-bar-input-border-radius-top-right: min(var(--border-radius-input), var(--border-radius-button));
    --dialog-search-bar-input-border-width-bottom: 1px;
    --dialog-search-bar-input-border-width-left: 1px;
    --dialog-search-bar-input-border-width-right: 1px;
    --dialog-search-bar-input-border-width-top: 1px;
    --dialog-tab-bar-tab-border-width-bottom-active: 2px;
    --dialog-tab-bar-tab-border-width-left-active: 0;
    --dialog-tab-bar-tab-border-width-right-active: 0;
    --dialog-tab-bar-tab-border-width-top-active: 0;
    --dialog-tab-bar-tab-border-width-bottom-inactive: 2px;
    --dialog-tab-bar-tab-border-width-left-inactive: 0;
    --dialog-tab-bar-tab-border-width-right-inactive: 0;
    --dialog-tab-bar-tab-border-width-top-inactive: 0;
    --dialog-tab-bar-tab-border-radius-bottom-left-active: 0;
    --dialog-tab-bar-tab-border-radius-bottom-right-active: 0;
    --dialog-tab-bar-tab-border-radius-top-left-active: min(var(--border-radius-input), var(--border-radius-button));
    --dialog-tab-bar-tab-border-radius-top-right-active: min(var(--border-radius-input), var(--border-radius-button));
    --dialog-tab-bar-tab-border-radius-bottom-left-inactive: 0;
    --dialog-tab-bar-tab-border-radius-bottom-right-inactive: 0;
    --dialog-tab-bar-tab-border-radius-top-left-inactive: min(var(--border-radius-input), var(--border-radius-button));
    --dialog-tab-bar-tab-border-radius-top-right-inactive: min(var(--border-radius-input), var(--border-radius-button));
    --dialog-table-border-radius-bottom-left: 0;
    --dialog-table-border-radius-bottom-right: 0;
    --dialog-table-border-radius-top-left: 0;
    --dialog-table-border-radius-top-right: 0;
    --dialog-table-cell-padding-bottom: var(--spacing-sm, 12px);
    --dialog-table-cell-padding-left: var(--spacing-sm, 12px);
    --dialog-table-cell-padding-right: var(--spacing-sm, 12px);
    --dialog-table-cell-padding-top: var(--spacing-sm, 12px);
    --dialog-backdrop-background-opacity: 0.8;
}