@import 'porsche_styles/variables.css';

@font-face {
   font-family: 'Porsche Next';
   font-style: normal;
   font-weight: 400;
   src: url('./fonts/porsche-next-latin-regular.b8f1c20.woff2');
}

@font-face {
   font-family: 'Porsche Next';
   font-style: normal;
   font-weight: 600;
   src: url('./fonts/porsche-next-latin-semi-bold.b5f6fca.woff2');
}

:root {
   /* assign Porsche fonts */
   --font-regular: var(--p-font-porsche-next, sans-serif);
   --font-bold: var(--p-font-porsche-next, sans-serif);
   --font-black: var(--p-font-porsche-next, sans-serif);

   /* Colors */
   --color-black: #000;
   --color-white: #fff;
   --color-navbar-sidebar: #d0d0d5;

   /* Color definitions for elements */
   --color-highlight-primary-default: var(--p-color-primary);
   --color-highlight-primary-hover: var(--p-color-contrast-high);

   --color-navigation-background: var(--p-color-canvas);
   --color-navigation-separator: var(--p-color-frosted);

   --color-text-primary-default: var(--p-color-primary);
   --color-text-secondary-default: var(--p-color-canvas);

   --color-text-home: var(--p-color-primary);

   --color-text-previewasset-link-default: var(--color-text-secondary-default);
   --color-text-previewasset-link-hover: var(--color-highlight-primary-hover);

   --color-button-cta-primary-text-default: var(--p-color-canvas);
   --color-button-cta-primary-text-hover: var(--p-color-canvas);
   --color-button-cta-primary-background-default: var(--p-color-contrast-higher);
   --color-button-cta-primary-background-hover: var(--p-color-contrast-high);
   --color-button-cta-primary-border-default: var(--p-color-contrast-higher);
   --color-button-cta-primary-border-hover: var(--p-color-contrast-high);

   --color-button-primary-text-default: var(--p-color-canvas);
   --color-button-primary-text-hover: var(--p-color-canvas);
   --color-button-primary-background-default: var(--p-color-contrast-higher);
   --color-button-primary-background-hover: var(--p-color-contrast-high);
   --color-button-primary-border-default: var(--p-color-contrast-higher);
   --color-button-primary-border-hover: var(--p-color-contrast-high);

   --color-button-cta-secondary-text-default: var(--p-color-primary);
   --color-button-cta-secondary-text-hover: var(--p-color-primary);
   --color-button-cta-secondary-background-default: var(--p-color-frosted-strong);
   --color-button-cta-secondary-background-hover: var(--p-color-frosted);
   --color-button-cta-secondary-border-default: var(--p-color-frosted-strong);
   --color-button-cta-secondary-border-hover: var(--p-color-frosted);

   --color-button-secondary-text-default: var(--p-color-primary);
   --color-button-secondary-text-hover: var(--p-color-primary);
   --color-button-secondary-background-default: var(--p-color-frosted-strong);
   --color-button-secondary-background-hover: var(--p-color-frosted);
   --color-button-secondary-border-default: var(--p-color-frosted-strong);
   --color-button-secondary-border-hover: var(--p-color-frosted);

   --color-header-background: var(--p-color-canvas);
   --color-header-text-default: var(--p-color-primary);
   --color-header-text-hover: var(--p-color-primary);
   --color-header-shadow: var(--p-color-backdrop);

   --color-main-background: var(--p-color-canvas);

   --color-breadcrumbs-text: var(--color-header-text-default);
   --color-breadcrumbs-home: var(--color-breadcrumbs-text);
   --color-breadcrumbs-separator: var(--color-breadcrumbs-text);

   --color-footer-home: var(--color-breadcrumbs-home);
   --color-footer-breadcrumbs-text: var(--color-breadcrumbs-text);
   --color-footer-background: var(--color-navigation-background);
   --color-footer-shadow: var(--p-color-backdrop);

   --color-scrollbar-thumb-light: var(--p-color-frosted);
   --color-scrollbar-thumb-light-transparent: var(--p-color-frosted-soft);
   --color-scrollbar-thumb-dark: var(--p-color-frosted-strong);

   --color-sidebar-background: var(--color-navigation-background);
   --color-sidebar-shadow: var(--p-color-backdrop);
   --color-sidebar-overlay: var(--p-color-backdrop);
   --color-sidebar-text-default: var(--p-color-primary);
   --color-sidebar-text-hover: var(--color-highlight-primary-hover);
   --color-sidebar-close-icon: var(--p-color-primary);

   --color-badge-text: var(--color-white);
   --color-badge-background: var(--p-color-frosted-strong);

   --color-langswitch-headline: var(--p-color-primary);
   --color-langswitch-text-default: var(--p-color-primary);
   --color-langswitch-text-hover: var(--p-color-primary);
   --color-langswitch-text-active: var(--p-color-primary);

   --color-hint-text: var(--p-color-canvas);
   --color-hint-background: var(--p-color-primary);

   --color-navbar-background: var(--color-sidebar-background);
   --color-navbar-spacer-background: transparent;
   --color-navbar-shadow: var(--p-color-backdrop);
   --color-navbar-overlay: var(--p-color-backdrop);
   --color-navbar-close: var(--p-color-primary);
   --color-navbar-menu: var(--p-color-primary);
   --color-navbar-text-default: var(--p-color-primary);
   --color-navbar-menu-entry-background-hover: var(--color-button-secondary-background-hover);
   --color-navbar-menu-entry-text-hover: var(--p-color-primary);
   --color-navbar-menu-entry-current-text-default: var(--p-color-primary);
   --color-navbar-menu-entry-current-background-default: var(--color-button-secondary-background-default);
   --color-navbar-menu-entry-current-icon-default: var(--p-color-primary);
   --color-navbar-menu-entry-current-icon-hover: var(--p-color-primary);
   --color-navbar-globallinks-default: var(--p-color-primary);
   --color-navbar-globallinks-hover: var(--p-color-primary);
   --color-navbar-globallinks-visited: var(--p-color-primary);

   --color-search-filter-label-text-default: var(--p-color-primary);
   --color-search-filter-label-text-hover: var(--p-color-primary);
   --color-search-filter-label-text-active: var(--p-color-primary);
   --color-search-filter-icon-default: var(--p-color-primary);
   --color-search-filter-icon-hover: var(--p-color-primary);
   --color-search-filter-background-default: var(--p-color-canvas);
   --color-search-filter-background-active: var(--p-color-canvas);
   --color-search-filter-background-hover: var(--p-color-canvas);
   --color-search-filter-border-default: var(--color-button-secondary-border-default);
   --color-search-filter-border-active: var(--color-button-secondary-border-default);
   --color-search-filter-border-hover: var(--color-button-secondary-border-default);
   --color-search-filteritem-text-default: var(--p-color-primary);
   --color-search-filteritem-text-hover: var(--p-color-primary);
   --color-search-filteritem-text-active: var(--p-color-primary);
   --color-search-filteritem-checkbox-background-default: transparent;
   --color-search-filteritem-checkbox-default: var(--p-color-primary);
   --color-search-filteritem-checkbox-icon-default: var(--p-color-primary);
   --color-search-filteritem-background-default: transparent;
   --color-search-filteritem-background-hover: var(--color-button-secondary-background-hover);
   --color-search-filteritem-background-active: var(--color-button-secondary-background-default);
   --color-search-results-text: var(--p-color-primary);
   --color-search-results-headline: var(--p-color-primary);
   --color-search-results-item-name-default: var(--p-color-primary);
   --color-search-results-item-type-default: var(--p-color-info);
   --color-search-results-sub-item-name-default: var(--p-color-primary);
   --color-search-results-item-arrow-default: var(--color-search-results-text);
   --color-search-results-item-chevron-default: var(--color-search-results-text);
   --color-search-results-pagination-text: var(--color-search-results-text);
   --color-search-results-pagination-button: var(--color-search-results-pagination-text);

   --color-content-text: var(--p-color-primary);
   --color-content-headline: var(--p-color-primary);
   --color-content-noassets-preview-background: transparent;

   --color-assettile-text: var(--p-color-primary);
   --color-assettile-text-type: var(--p-color-info);
   --color-assettile-text-title: var(--p-color-primary);
   --color-assettile-text-title-hover: var(--p-color-primary);
   --color-assettile-background: var(--color-button-secondary-background-hover);
   --color-assettile-info-background-default: var(--color-button-secondary-background-hover);
   --color-assettile-info-background-hover: var(--color-button-secondary-background-default);
   --color-assettile-shadow: var(--p-color-backdrop);
   --color-assettile-gradient-start: var(--p-color-backdrop);
   --color-assettile-gradient-end: transparent;
   --color-assettile-favorite-unselected-default: var(--p-color-canvas);
   --color-assettile-favorite-unselected-hover: var(--p-color-canvas);
   --color-assettile-favorite-selected-default: var(--p-color-canvas);
   --color-assettile-favorite-selected-hover: var(--p-color-canvas);
   --color-assettile-download-gradient-start: hsl(225 66.7% 1.2% / 0.7);
   --color-assettile-download-gradient-end: hsl(225 66.7% 1.2% / 0.1);
   --color-assettile-download-icon: var(--p-color-canvas);
   --color-assettile-scheduled-icon: var(--p-color-primary);
   --color-assettile-fallback-icon: var(--p-color-primary);
   --color-assettile-scope-icon-default: var(--p-color-primary);
   --color-assettile-scope-icon-hover: var(--p-color-primary);

   --color-favorites-title: var(--color-text-primary-default);
   --color-favorites-icon: var(--color-favorites-title);

   --color-asset-background: var(--p-color-contrast-higher);

   --color-asset-website-text: var(--color-text-secondary-default);
   --color-asset-website-title: var(--color-asset-website-text);
   --color-asset-website-description: var(--color-asset-website-text);
   --color-asset-website-description-link: var(--color-highlight-primary-default);
   --color-asset-website-headline-line: var(--p-color-canvas);
   --color-asset-website-link-text: var(--color-button-primary-text-default);
   --color-asset-website-link-text-hover: var(--color-asset-website-link-text);
   --color-asset-website-link-background-default: var(--color-button-primary-background-default);
   --color-asset-website-link-background-hover: var(--color-button-primary-background-hover);

   --color-asset-control-button-icon-default: var(--color-button-primary-text-default);
   --color-asset-control-button-icon-hover: var(--color-button-primary-text-hover);
   --color-asset-control-button-background-default: var(--color-button-primary-background-default);
   --color-asset-control-button-background-hover: var(--color-button-primary-background-hover);
   --color-asset-control-button-background-active: var(--color-button-primary-background-default);
   --color-asset-control-button-border-default: var(--color-button-primary-border-default);
   --color-asset-control-button-border-hover: var(--color-button-primary-border-hover);
   --color-asset-control-button-border-focus: var(--p-color-focus);

   --color-asset-navigation-button-background-default: var(--color-button-primary-background-default);
   --color-asset-navigation-button-background-hover: var(--color-button-primary-background-hover);
   --color-asset-navigation-button-background-active: var(--color-button-primary-background-default);
   --color-asset-navigation-button-icon-default: var(--color-button-primary-text-default);
   --color-asset-navigation-button-icon-hover: var(--color-button-primary-text-hover);
   --color-asset-navigation-button-icon-active: var(--color-button-primary-text-default);

   --color-asset-pages-text: var(--p-color-primary);
   --color-asset-pages-background: var(--p-color-canvas);
   --color-asset-pages-shadow: var(--p-color-backdrop);

   --color-asset-pages-page-background-default: var(--p-color-backdrop);
   --color-asset-pages-page-text-default: var(--p-color-primary);

   --color-asset-pages-navigation-background-default: var(--color-button-primary-background-default);
   --color-asset-pages-navigation-background-hover: var(--color-button-primary-background-hover);
   --color-asset-pages-navigation-background-active: var(--color-button-primary-background-default);
   --color-asset-pages-navigation-after-focus-border-default: var(--p-color-focus);

   --color-asset-video-playbutton-icon-default: var(--color-button-primary-text-default);
   --color-asset-video-playbutton-icon-hover: var(--color-button-primary-text-hover);
   --color-asset-video-playbutton-background-default: var(--color-button-primary-background-default);
   --color-asset-video-playbutton-background-hover: var(--color-button-primary-background-hover);
   --color-asset-video-playbutton-border-default: var(--color-button-primary-border-default);
   --color-asset-video-playbutton-border-hover: var(--color-button-primary-border-hover);

   --color-asset-video-progressbar-background: var(--p-color-contrast-higher);
   --color-asset-video-progressbar-progress: var(--p-color-canvas);

   --color-asset-video-volumefader-background: var(--p-color-contrast-higher);
   --color-asset-video-volumefader-volume: var(--p-color-canvas);

   --color-asset-video-controls-container-background: var(--p-color-contrast-higher);
   --color-asset-video-controls-fore: var(--p-color-contrast-higher);

   --color-asset-video-control-button: var(--p-color-canvas);

   --color-asset-video-time-text: var(--p-color-canvas);

   --color-asset-pdf-loadingIndicatorProgress: var(--p-color-info);

   --color-dialog-content-text: var(--p-color-primary);
   --color-dialog-content-icon: var(--p-color-primary);
   --color-dialog-background: var(--p-color-backdrop);
   --color-dialog-content-background: var(--p-color-canvas);
   --color-dialog-content-button-confirm-text-default: var(--color-button-primary-text-default);
   --color-dialog-content-button-confirm-text-default-hover: var(--color-button-primary-text-hover);
   --color-dialog-content-button-confirm-background-default: var(--color-button-primary-background-default);
   --color-dialog-content-button-confirm-background-hover: var(--color-button-primary-background-hover);
   --color-dialog-content-button-confirm-background-active: var(--color-dialog-content-button-confirm-background-default);
   --color-dialog-content-button-confirm-border-default: var(--color-button-primary-border-default);
   --color-dialog-content-button-confirm-border-hover: var(--color-button-primary-border-hover);
   --color-dialog-content-button-confirm-border-active: var(--color-dialog-content-button-confirm-border-default);
   --color-dialog-content-button-refuse-text-default: var(--color-button-secondary-text-default);
   --color-dialog-content-button-refuse-text-hover: var(--color-button-secondary-text-hover);
   --color-dialog-content-button-refuse-text-active: var(--color-dialog-content-button-refuse-text-default);
   --color-dialog-content-button-refuse-background-default: var(--color-button-secondary-background-default);
   --color-dialog-content-button-refuse-border-default: var(--color-button-secondary-border-default);
   --color-dialog-content-button-refuse-border-hover: var(--color-button-secondary-border-hover);
   --color-dialog-content-button-refuse-border-active: var(--color-dialog-content-button-refuse-border-default);

   /* TODO: define editor colors when needed ...
   --color-editor-dialog-headline1: var(--p-color-primary);
   --color-editor-dialog-paragraph: var(--p-color-primary);
   --color-editor-dialog-primary-button-text-default: var(--color-button-primary-text-default);
   --color-editor-dialog-primary-button-text-hover: var(--color-button-primary-text-default);
   --color-editor-dialog-primary-button-text-active: var(--color-editor-dialog-primary-button-text-default);
   --color-editor-dialog-primary-button-background-default: var(--color-button-primary-background-default);
   --color-editor-dialog-primary-button-background-hover: var(--color-button-primary-background-hover);
   --color-editor-dialog-primary-button-background-active: var(--color-editor-dialog-primary-button-background-default);
   --color-editor-dialog-secondary-button-text-default: var(--color-highlight-primary-default);
   --color-editor-dialog-secondary-button-text-hover: var(--color-highlight-primary-hover);
   --color-editor-dialog-secondary-button-text-active: var(--color-editor-dialog-secondary-button-text-default);
   --color-editor-dialog-secondary-button-background-default: transparent;
   --color-editor-dialog-secondary-button-background-hover: var(--color-editor-dialog-secondary-button-background-default);
   --color-editor-dialog-secondary-button-background-active: var(--color-editor-dialog-secondary-button-background-default);
   --color-editor-dialog-secondary-button-border-default: var(--color-editor-dialog-secondary-button-text-default);
   --color-editor-dialog-secondary-button-border-hover: var(--color-editor-dialog-secondary-button-text-hover);
   --color-editor-dialog-secondary-button-border-active: var(--color-editor-dialog-secondary-button-border-default);
   --color-editor-dialog-input-message-error: var(--color-highlight-primary-default);
   --color-editor-dialog-input-text-default: var(--color-b12-grey-7);
   --color-editor-dialog-input-text-error: var(--color-white);
   --color-editor-dialog-input-icon-default: var(--color-b12-grey-4);
   --color-editor-dialog-input-background-default: var(--color-white);
   --color-editor-dialog-input-background-error: var(--color-highlight-primary-hover);
   --color-editor-dialog-input-border-default: var(--color-b12-grey-4);
   --color-editor-dialog-input-border-hover: var(--color-highlight-primary-hover);
   --color-editor-dialog-input-border-error: var(--color-highlight-primary-hover);
   --color-editor-dialog-textfield-placeholder-default: var(--color-editor-dialog-input-text-default);
   --color-editor-dialog-textfield-placeholder-hover: var(--color-editor-dialog-textfield-placeholder-default);
   --color-editor-dialog-textfield-placeholder-error: var(--color-editor-dialog-input-text-error);
   --color-editor-dialog-dropdown-text-default: var(--color-editor-dialog-input-text-default);
   --color-editor-dialog-dropdown-arrow-default: var(--color-editor-dialog-input-text-default);
   --color-editor-dialog-dropdown-arrow-hover: var(--color-highlight-primary-hover);
   --color-editor-dialog-dropdown-arrow-error: var(--color-editor-dialog-input-text-error);
   --color-editor-dialog-dropdown-background-default: var(--color-editor-dialog-input-background-default);
   --color-editor-dialog-dropdown-background-hover: var(--color-b12-grey-1);
   --color-editor-dialog-dropdown-list-background-default: var(--color-b12-grey-2);
   --color-editor-dialog-dropdown-list-border-default: var(--color-highlight-primary-hover);
   --color-editor-dialog-dropdown-element-text-default: var(--color-editor-dialog-input-text-default);
   --color-editor-dialog-dropdown-element-background-hover: var(--color-b12-grey-1);
   --color-editor-dialog-button-text-default: var(--color-button-primary-text-default);
   --color-editor-dialog-button-text-hover: var(--color-button-primary-text-hover);
   --color-editor-dialog-button-background-default: var(--color-button-primary-background-default);
   --color-editor-dialog-button-background-hover: var(--color-button-primary-background-hover);
   --color-editor-dialog-close-icon-default: var(--color-b12-grey-7);
   --color-editor-dialog-close-icon-hover: var(--color-highlight-primary-hover);

   --color-editor-metadata-dialog-previewimage-text-default: var(--color-dialog-content-text);
   --color-editor-metadata-dialog-previewimage-link-default: var(--color-highlight-primary-default);
   --color-editor-metadata-dialog-previewimage-link-hover: var(--color-highlight-primary-hover);
   --color-editor-metadata-dialog-previewimage-icon-default: var(--color-editor-metadata-dialog-previewimage-text-default);
   --color-editor-metadata-dialog-previewimage-border-default: var(--color-b12-grey-1);
   --color-editor-metadata-dialog-previewimage-background-default: var(--color-b12-grey-1);
   --color-editor-metadata-dialog-previewimage-remove-background-default: var(--color-b12-grey-6);
   --color-editor-metadata-dialog-previewimage-remove-icon-default: var(--color-white);
   --color-editor-metadata-dialog-previewimage-remove-icon-hover: var(--color-highlight-primary-hover);

   --color-editor-usermenu-background-default: transparent;
   --color-editor-usermenu-background-hover: var(--color-b12-grey-2);
   --color-editor-usermenu-background-active: var(--color-editor-usermenu-background-hover);
   --color-editor-usermenu-username-default: var(--color-header-text-default);
   --color-editor-usermenu-username-hover: var(--color-highlight-primary-hover);
   --color-editor-usermenu-unitname: var(--color-b12-grey-6);
   --color-editor-usermenu-usericon-text: var(--color-header-text-default);
   --color-editor-usermenu-usericon-background-default: var(--color-b12-grey-2);
   --color-editor-usermenu-usericon-background-hover: var(--color-b12-grey-3);
   --color-editor-usermenu-content-background-default: var(--color-editor-usermenu-background-active);
   --color-editor-usermenu-content-background-hover: var(--color-b12-grey-3);
   --color-editor-usermenu-content-text: var(--color-header-text-default);
   --color-editor-usermenu-content-icon: var(--color-editor-usermenu-content-text);

   --color-editor-editmenu-toggle-text-default: var(--color-text-primary-default);
   --color-editor-editmenu-toggle-text-hover: var(--color-highlight-primary-hover);
   --color-editor-editmenu-toggle-text-active: var(--color-highlight-primary-default);
   --color-editor-editmenu-toggle-background-default: var(--color-white-t70);
   --color-editor-editmenu-toggle-background-active: var(--color-white);
   --color-editor-editmenu-list-text-default: var(--color-text-primary-default);
   --color-editor-editmenu-list-text-hover: var(--color-editor-editmenu-list-text-default);
   --color-editor-editmenu-list-text-delete: var(--color-highlight-primary-default);
   --color-editor-editmenu-list-background-default: var(--color-b12-grey-1);
   --color-editor-editmenu-list-item-background-hover: var(--color-b12-grey-3);

   --color-editor-addasset-text-default: var(--color-assettile-text);
   --color-editor-addasset-link-default: var(--color-highlight-primary-default);
   --color-editor-addasset-link-hover: var(--color-highlight-primary-hover);
   --color-editor-addasset-icon-default: var(--color-editor-addasset-text-default);
   --color-editor-addasset-background-default: var(--color-assettile-background);
   --color-editor-addasset-background-hover: var(--color-b12-grey-2);
   --color-editor-addasset-background-dragging: var(--color-b12-grey-3);
   --color-editor-addasset-background-disabled: var(--color-b12-grey-4);
   --color-editor-addasset-border-default: var(--color-editor-addasset-text-default);
   --color-editor-addasset-border-hover: var(--color-b12-grey-2);
   --color-editor-addasset-border-dragging: var(--color-white);

   --color-editor-asset-upload-previewimage-icon: var(--color-assettile-text);
   --color-editor-asset-upload-background: var(--color-white-t50);
   --color-editor-asset-upload-previewimage-border: var(--color-assettile-text);
   --color-editor-asset-upload-previewimage-background: var(--color-assettile-background);
   --color-editor-asset-uploaded-background: var(--color-white-t50);
   --color-editor-asset-uploaded-icon-background: var(--color-notification-green);
   --color-editor-asset-uploaded-icon: var(--color-black);
   --color-editor-asset-locked-icon: var(--color-b12-grey-7);
   --color-editor-asset-locked-tooltip-text: var(--color-assettile-background);
   --color-editor-asset-locked-tooltip-background: var(--color-assettile-text);
   --color-editor-asset-draggable-enabled: var(--color-assettile-background);
   --color-editor-asset-drag-border: var(--color-assettile-text);
   --color-editor-asset-drag-tile-border: var(--color-b12-red-dark);
   --color-editor-asset-targeted-border: var(--color-white);
   --color-editor-asset-edittitle-background-hover: var(--color-b12-grey-4);
   --color-editor-asset-edittitle-border-editing: var(--color-highlight-primary-default);
   --color-editor-asset-edittitle-button-icon: var(--color-text-primary-default);
   --color-editor-asset-edittitle-button-background: var(--color-white);

   --color-editor-notification-text: var(--color-text-primary-default);
   --color-editor-notification-background: var(--color-b12-grey-2);

   --color-editor-spinner-progress: var(--color-b12-grey-6);
   --color-editor-spinner-rail: var(--color-white);
   --color-editor-spinner-background: var(--color-editor-notification-background);
   --color-editor-progress-success-icon: var(--color-b12-grey-7);
   --color-editor-progress-success-background: var(--color-white);

   --color-editor-toast-background: var(--color-b12-grey-2);
   --color-editor-toast-text: var(--color-text-primary-default);
   --color-editor-toast-icon-success: var(--color-notification-green);
   --color-editor-toast-icon-error: var(--color-notification-red);
   --color-editor-toast-icon-attention: var(--color-notification-yellow);
   --color-editor-toast-icon-info: var(--color-text-primary-default);
   --color-editor-toast-close-default: var(--color-text-primary-default);
   --color-editor-toast-close-hover: var(--color-text-primary-default);

   --color-homescreen-edit-text-hover: var(--color-b12-grey-2);
   --color-homescreen-edit-action-button-text-hover: var(--color-highlight-primary-hover);
   --color-homescreen-edit-text-border: var(--color-focus-border);
   --color-homescreen-edit-action-button-color-hover: var(--color-highlight-primary-hover);
   --color-homescreen-edit-action-button-color-disabled: var(--color-b12-grey-6);
   --color-homescreen-edit-text-counter-color: var(--color-b12-grey-5);
   --color-homescreen-edit-text-button-color: var(--color-white);
   --color-homescreen-edit-text-button-color-disabled: var(--color-b12-grey-4);

   --color-editor-upload-assetlist-header: var(--color-text-primary-default);
   --color-editor-upload-assetlist-item-background: var(--color-main-background);
   --color-editor-upload-assetlist-item-image: var(--color-b12-grey-4);
   --color-editor-upload-assetlist-item-title: var(--color-text-primary-default);
   --color-editor-upload-assetlist-item-type: var(--color-text-secondary-default);
   --color-editor-upload-assetlist-item-border-default: var(--color-search-border);
   --color-editor-upload-assetlist-item-border-selected: var(--color-editor-addasset-border-default);
   --color-editor-upload-assetlist-item-btn-remove-default: var(--color-button-secondary-text-default);
   --color-editor-upload-assetlist-item-btn-remove-hover: var(--color-button-secondary-text-hover);
   */

   --color-tooltip-text: var(--p-color-canvas);
   --color-tooltip-background: var(--p-color-info);

   /* TODO: define editor colors when needed ...
   --color-assistant-dialog-background: var(--color-main-background);
   --color-assistant-dialog-header: var(--color-header-text-default);
   --color-assistant-dialog-header-app-name: var(--color-header-text-default);
   --color-assistant-dialog-header-path: var(--color-header-text-default);
   --color-assistant-dialog-header-powered-by: var(--color-text-secondary-default);
   --color-assistant-dialog-header-lang-bu: var(--color-text-secondary-default);
   --color-assistant-dialog-header-usericon-background: var(--color-b12-grey-2);
   --color-assistant-dialog-header-usericon-text: var(--color-white);
   --color-assistant-dialog-header-close: var(--color-sidebar-close-icon);
   --color-assistant-dialog-header-close-background-hover: var(--color-b12-red-light);
   --color-assistant-dialog-header-background: var(--color-header-background);
   --color-assistant-dialog-footer-border: var(--color-black-t30);

   --color-assistant-dialog-steps-indicator-current: var(--color-b12-grey-7);
   --color-assistant-dialog-steps-indicator-disabled: var(--color-black-t30);
   --color-assistant-dialog-steps-indicator-error: var(--color-black-t30);
   --color-assistant-dialog-steps-indicator-visited: var(--color-b12-grey-5);
   --color-assistant-dialog-steps-indicator-ahead: var(--color-b12-grey-4);
   --color-assistant-dialog-steps-indicator-ahead-text: var(--color-text-primary-default);

   --color-assistant-dialog-variant-selection-header: var(--color-text-primary-default);
   --color-assistant-dialog-variant-selection-button: var(--color-text-primary-default);
   --color-assistant-dialog-variant-selection-button-disabled: var(--color-black-t50);
   --color-assistant-dialog-variant-selection-button-background-default: var(--color-white);
   --color-assistant-dialog-variant-selection-button-background-hover: var(--color-b12-grey-2);

   --color-radiobutton-default: var(--color-b12-grey-3);
   --color-radiobutton-hover: var(--color-b12-grey-4);
   --color-radiobutton-checked: var(--color-b12-red-dark);
   --color-radiobutton-checked-hover: var(--color-b12-red-light);
   --color-radiobutton-disabled: var(--color-b12-grey-3);
   --color-radiobutton-text: var(--color-text-primary-default);
   --color-radiobutton-text-disabled: var(--color-b12-grey-5);

   --color-addDataPools-dialog-loading: var(--color-b12-grey-4);
   --color-addDataPools-dialog-list-item-border: var(--color-button-secondary-border-default);
   --color-addDataPools-dialog-list-item-icon: var(--color-text-primary-default);

   --color-create-website-table-header: var(--color-text-primary-default);
   --color-create-website-table-item-background: var(--color-b12-grey-2);
   --color-create-website-table-item-text: var(--color-text-primary-default);
   --color-create-website-table-item-url: var(--color-text-secondary-default);
   --color-create-website-table-item-delete-default: var(--color-b12-red-dark);
   --color-create-website-table-item-delete-hover: var(--color-b12-red-light);
   --color-create-website-input-label: var(--color-b12-grey-5);

   --color-assistant-dialog-asset-selection-border: var(--color-black-t30);
   --color-assistant-dialog-asset-selection-preview-text: var(--color-text-primary-default);
   --color-assistant-dialog-asset-selection-preview-empty-text: var(--color-b12-grey-4-t50);
   --color-assistant-dialog-asset-selection-preview-empty-link: var(--color-b12-red-dark);
   --color-assistant-dialog-asset-selection-preview-header: var(--color-text-primary-default);
   --color-assistant-dialog-asset-selection-toggle-btn-default: var(--color-b12-red-dark);
   --color-assistant-dialog-asset-selection-toggle-btn-disabled: var(--color-b12-grey-3);

   --color-assistant-dialog-asset-selection-confirmation-header: var(--color-text-primary-default);
   --color-assistant-dialog-asset-selection-confirmation-addassetarea-background-hover: var(--color-b12-grey-2);
   --color-assistant-dialog-asset-selection-confirmation-addassetarea-background-default: var(--color-assettile-background);
   --color-assistant-dialog-asset-selection-confirmation-addassetarea-border-default: var(--color-editor-addasset-text-default);
   --color-assistant-dialog-asset-selection-confirmation-addassetarea-border-hover: var(--color-b12-grey-2);
   --color-assistant-dialog-asset-selection-confirmation-addassetarea-icon: var(--color-b12-red-dark);
   --color-assistant-dialog-asset-selection-confirmation-release-header: var(--color-text-primary-default);
   --color-assistant-dialog-asset-selection-confirmation-release-placeholder-empty: var(--color-b12-grey-5);
   --color-assistant-dialog-asset-selection-confirmation-release-placeholder-filled: var(--color-b12-grey-7);
   --color-assistant-dialog-asset-selection-confirmation-release-info-btn-default: var(--color-b12-red-dark);
   --color-assistant-dialog-asset-selection-confirmation-release-info-btn-hover: var(--color-b12-red-light);

   --color-assistant-dialog-breadcrumbs-current: var(--color-b12-grey-5);
   --color-assistant-dialog-breadcrumbs-previous-default: var(--color-text-primary-default);
   --color-assistant-dialog-breadcrumbs-previous-hover: var(--color-text-primary-default);
   --color-assistant-dialog-breadcrumbs-separator: var(--color-b12-grey-5);

   --color-assistant-dialog-datapools-loading-spinner: var(--color-b12-grey-5);
   --color-assistant-dialog-datapools-loading-text: var(--color-b12-grey-6);

   --color-assistant-fileupload-header: var(--color-text-primary-default);
   --color-assistant-fileupload-area-background-default: var(--color-editor-addasset-background-default);
   --color-assistant-fileupload-area-background-hover: var(--color-editor-addasset-background-hover);
   --color-assistant-fileupload-area-border-default: var(--color-editor-addasset-border-default);
   --color-assistant-fileupload-area-border-dragging: var(--color-editor-addasset-border-dragging);
   --color-assistant-fileupload-area-anchor: var(--color-editor-addasset-link-default);
   --color-assistant-fileupload-area-text: var(--color-editor-addasset-text-default);

   --color-assistant-foldermenu-entry-hover: var(--color-b12-grey-6);
   --color-assistant-foldermenu-entry-background-hover: var(--color-b12-grey-3-t80);
   --color-assistant-foldermenu-entry-background-selected: var(--color-b12-grey-3);
   --color-assistant-foldermenu-entry-chevron-hover: var(--color-b12-red-dark);
   --color-assistant-foldermenu-entry-border-selected: var(--color-b12-red-dark);
   --color-assistant-foldermenu-entry-border-focus: var(--color-b12-red-dark);
   --color-assistant-foldermenu-entry-text-default: var(--color-b12-grey-5);
   --color-assistant-foldermenu-entry-text-selected: var(--color-text-primary-default);
   --color-assistant-foldermenu-entry-text-locked: var(--color-b12-grey-4);
   --color-assistant-foldermenu-header: var(--color-text-primary-default);
   --color-assistant-foldermenu-header-btn-select-parent: var(--color-b12-grey-5);
   --color-assistant-foldermenu-header-border-selected: var(--color-b12-red-dark);
   --color-assistant-foldermenu-header-background-hover: var(--color-b12-grey-3-t80);
   --color-assistant-foldermenu-folderinfo-selected-text: var(--color-text-primary-default);
   --color-assistant-foldermenu-folderinfo-selected-background: var(--color-b12-red-light);
   --color-assistant-foldermenu-title: var(--color-text-primary-default);

   --color-assistant-foldermenu-add-source-background-default: var(--color-button-cta-secondary-background-default);
   --color-assistant-foldermenu-add-source-background-hover: var(--color-button-cta-secondary-background-hover);
   --color-assistant-foldermenu-add-source-border-default: var(--color-button-cta-secondary-border-default);
   --color-assistant-foldermenu-add-source-border-hover: var(--color-button-cta-secondary-border-default);
   --color-assistant-foldermenu-add-source-text-default: var(--color-button-cta-secondary-text-default);
   --color-assistant-foldermenu-add-source-text-hover: var(--color-button-cta-secondary-text-hover);

   --color-assistant-dialog-destination-selection-border: var(--color-black-t30);
   --color-assistant-dialog-destination-selection-title: var(--color-text-primary-default);
   --color-assistant-dialog-destination-selection-description: var(--color-b12-grey-6);

   --color-editor-editable-text-background-hover: var(--color-b12-grey-2);
   --color-editor-editable-text-border-focus: var(--color-focus-border);
   --color-editor-editable-text-button-background: var(--color-white);
   --color-editor-editable-text-button-background-disabled: var(--color-b12-grey-4);
   --color-editor-editable-text: var(--color-text-primary-default);
   --color-editor-editable-text-counter: var(--color-b12-grey-5);

   --color-add-topic-dialog-header: var(var(--color-text-primary-default));
   --color-add-topic-dialog-subheader: var(--color-b12-grey-5);
   --color-add-topic-dialog-event-tile-background: var(--color-white);
   --color-add-topic-dialog-event-tile-background-hover: var(--color-white-t70);
   --color-add-topic-dialog-event-tile-image-background: var(--color-b12-red-dark);
   --color-add-topic-dialog-event-tile-text: var(--color-b12-grey-4);
   --color-add-topic-dialog-event-tile-title: var(--color-text-primary-default);
   --color-add-topic-dialog-event-tile-border-selected: var(--color-b12-red-dark);

   --color-swap-homescreen-dialog-loading-spinner: var(--color-b12-grey-5);
   --color-swap-homescreen-dialog-separator: var(--color-black-t30);

   --color-move-hotspots-controls: var(--color-text-primary-default);
   --color-move-hotspots-controls-divider: var(--color-black-t30);

   --color-hotspot-startscreen-empty-border: var(--color-b12-grey-4);
   --color-hotspot-startscreen-empty-input-background-disabled: var(--color-b12-grey-3);
   --color-hotspot-startscreen-empty-title: var(--color-b12-grey-6);
   --color-hotspot-startscreen-empty-title-disabled: var(--color-b12-grey-5);
   --color-hotspot-startscreen-empty-description: var(--color-b12-grey-5);
   --color-hotspot-startscreen-empty-icon: var(--color-b12-grey-6);
   --color-hotspot-startscreen-empty-icon-disabled: var(--color-b12-grey-5);

   --color-utc-info-dialog-infoicon: var(--color-text-primary-default);
   */

   --color-topicGraphicSidebar-background-default: var(--p-color-canvas);
   --color-topicGraphicSidebar-shadow-default: var(--p-color-backdrop);

   --color-homegraphic-element-connectors: var(--p-color-info);
   --color-homegraphic-element-connectors-shadow: var(--p-color-frosted-strong);

   /* modifications */

   /* avoid white text on white background with dark website appearance in browser */
   color: var(--p-color-primary);

   .logo {
      --logo-height: calc(var(--header-height, 96px) * 0.46);
      width: unset;
      max-width: 196px;
      max-height: 3.25em;

      /* TODO: this should only apply if favorites are active */
      @media (max-width: 720px) {
         transform: translate(calc(-50% - 25px), -50%);
      }

      img {
         object-fit: contain;
         width: 100%;
         height: 100%;
         image-rendering: high-quality;
      }

      svg {
         shape-rendering: geometricPrecision;
      }
   }

   .header .toolbar button {
      width: unset;
   }

   h1 {
      .toplineText,
      .titleText {
         font-weight: 400;
      }
   }

   .button--text {
      border-color: transparent;
      border-radius: var(--p-radius-xl);

      &:hover {
         border-color: transparent;
      }
   }

   .home-topics {
      img {
         display: none;
      }

      .button span {
         text-transform: unset;
      }
   }

   .cta-panel {
      .button {
         border: 0;
      }

      .button--icon {
         &.button--boothmap {
            position: relative;
            box-sizing: content-box;
            color: var(--color-button-cta-secondary-text-default);
            border-color: var(--color-button-cta-secondary-border-default);
            border-radius: var(--p-radius-xl);
            background-color: var(--color-button-cta-secondary-background-default);

            &:hover {
               color: var(--color-button-cta-secondary-text-hover);
               border-color: var(--color-button-cta-secondary-border-hover);
               border-radius: var(--p-radius-xl);
               background-color: var(--color-button-cta-secondary-background-hover);
            }

            &::before {
               content: '';
               position: absolute;
               z-index: -1;
               width: 100%;
               height: 100%;
               border-radius: var(--p-radius-xl);
               background-color: var(--p-color-surface);
            }
         }

         &.button--contact {
            position: relative;
            box-sizing: content-box;
            color: var(--color-button-cta-primary-text-default);
            border-color: var(--color-button-cta-primary-border-default);
            border-radius: var(--p-radius-xl);
            background-color: var(--color-button-cta-primary-background-default);

            &:hover {
               color: var(--color-button-cta-primary-text-hover);
               border-color: var(--color-button-cta-primary-border-hover);
               border-radius: var(--p-radius-xl);
               background-color: var(--color-button-cta-primary-background-hover);
            }

            &::before {
               content: '';
               position: absolute;
               z-index: -1;
               width: 100%;
               height: 100%;
               border-radius: var(--p-radius-xl);
               background-color: var(--p-color-surface);
            }
         }
      }
   }

   .langswitch .langswitch-language {
      margin-bottom: 4px;

      button {
         padding: 1.4rem;
         border-radius: var(--p-radius-xl);
      }

      button:hover {
         background-color: var(--color-button-secondary-background-hover);
      }

      &.langswitch-language--active button,
      button:active {
         background-color: var(--color-button-secondary-background-default);
      }
   }

   .navbar-sidebar {
      background-color: var(--color-navbar-sidebar);
   }

   .menu-level .base-topic {
      gap: 2px;

      .ctrl-area {
         &:hover {
            border-radius: var(--p-radius-xl);
            background-color: var(--color-button-secondary-background-hover);
         }

         &:active {
            background-color: var(--color-button-secondary-background-default);
         }
      }

      .topic {
         border-radius: var(--p-radius-xl);

         &:hover {
            background-color: var(--color-button-secondary-background-hover);
         }

         &.current-topic {
            background-color: var(--color-button-secondary-background-default);
         }
      }
   }

   .menuitem-elements {
      margin-bottom: 4px;
      border-radius: var(--p-radius-xl);

      &:has(a:active) {
         background-color: var(--color-button-secondary-background-default);
      }
   }

   li.content-asset {
      border-radius: var(--p-radius-2xl);
      overflow: hidden;
      box-shadow: 0.2rem 0.2rem 1rem -0.5rem var(--color-assettile-shadow);
   }

   .content-assetpreview {
      img {
         object-fit: cover;
         width: 100%;
         height: 100%;
      }
   }

   .dialog .dialog-button.dialog-button--refuse:hover {
      background-color: var(--color-button-secondary-background-hover);
   }

   button.asset-navigation,
   .presentation button {
      --color-black: var(--color-button-cta-primary-text-default);
   }
}