/* Fonts */
@font-face {
   font-family: ZEISS Text UI Web;
   src: url('fonts/ZEISSTextUIVFWeb-Upright.woff2') format('woff2-variations');
   font-weight: 100 900;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: ZEISS Text UI Web;
   src: url('fonts/ZEISSTextUIVFWeb-Italic.woff2') format('woff2-variations');
   font-weight: 100 900;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: ZEISS Head UI Web;
   src: url('fonts/ZEISSHeadUIVFWeb.woff2') format('woff2-variations');
   font-weight: 100 900;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: ZEISSIcons;
   src: url('fonts/ZEISSIcons.woff') format('woff');
   font-weight: 400;
   font-style: normal;
   font-display: block;
}

:root {
   /* Font variables */
   --font-regular: 'ZEISS Text UI Web', sans-serif;
   --font-bold: 'ZEISS Text UI Web', sans-serif;
   --font-black: 'ZEISS Head UI Web', sans-serif;
   --font-icon: ZEISSIcons;

   /* basic formatting for ZEISS icon glyphs */

   .zeissicon {
      speak: never;
      font-variant: normal;
      text-transform: none;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-style: normal;
      font-weight: 400;
      line-height: 1;
      font-family: ZEISSIcons, sans-serif;
   }

   /* Colors */
   --color-logo: #0f2db3;
   --color-black: #000;
   --color-black-t30: rgba(0, 0, 0, 0.3);
   --color-black-t50: rgba(0, 0, 0, 0.5);
   --color-white: #fff;
   --color-white-t50: rgba(255, 255, 255, 0.5);
   --color-info_subtle: #eaf7ff;
   --color-success_subtle: #e5f9f3;
   --color-success_strong: #1e8565;
   --color-caution_subtle: #fdbb08;
   --color-caution_strong: #986f00;
   --color-error: #e71e1e;
   --color-focus: #00346c;
   --color-hover: #0052aa;
   --color-info: #1a88ff;
   --color-interactive: #0072ef;
   --color-grey-01: #f5f8fa;
   --color-grey-02: #f2f5f8;
   --color-grey-03: #ecf0f4;
   --color-grey-04: #e6ebf0;
   --color-grey-05: #dce3e9;
   --color-grey-06: #d1d9e1;
   --color-grey-07: #c2cdd6;
   --color-grey-08: #b4c0ca;
   --color-grey-09: #a4b0bc;
   --color-grey-medium: #778592;
   --color-grey-10: #32373e;
   --color-grey-11: #202327;

   --color-notification-red: var(--color-error);
   --color-notification-yellow: var(--color-caution_subtle);
   --color-notification-green: var(--color-success_strong);
   --color-focus-border: var(--color-focus);

   /* Color definitions for elements */
   --color-backdrop-light: rgba(255, 255, 255, 0.7);
   --color-backdrop-dark: rgba(0, 0, 0, 0.8);

   --color-highlight-primary-default: var(--color-interactive);
   --color-highlight-primary-hover: var(--color-hover);

   --color-navigation-background: var(--color-grey-01);
   --color-navigation-separator: var(--color-grey-07);

   --color-text-primary-default: var(--color-grey-10);
   --color-text-secondary-default: var(--color-grey-09);

   --color-text-home: var(--color-grey-10);

   --color-editor-editable-text: var(--color-grey-10);
   --color-text-previewasset-link-default: var(--color-text-secondary-default);
   --color-text-previewasset-link-hover: var(--color-highlight-primary-hover);

   --color-button-primary-text-default: var(--color-white);
   --color-button-primary-text-hover: var(--color-white);
   --color-button-primary-background-default: var(--color-highlight-primary-default);
   --color-button-primary-background-hover: var(--color-highlight-primary-hover);
   --color-button-primary-border-default: var(--color-highlight-primary-default);
   --color-button-primary-border-hover: var(--color-highlight-primary-hover);

   --color-button-secondary-text-default: var(--color-highlight-primary-default);
   --color-button-secondary-text-hover: var(--color-highlight-primary-hover);
   --color-button-secondary-background-default: var(--color-white);
   --color-button-secondary-background-hover: var(--color-info_subtle);
   --color-button-secondary-border-default: var(--color-highlight-primary-default);
   --color-button-secondary-border-hover: var(--color-highlight-primary-hover);

   --color-button-cta-primary-text-default: var(--color-white);
   --color-button-cta-primary-text-hover: var(--color-white);
   --color-button-cta-primary-background-default: var(--color-highlight-primary-default);
   --color-button-cta-primary-background-hover: var(--color-highlight-primary-hover);
   --color-button-cta-primary-border-default: var(--color-highlight-primary-default);
   --color-button-cta-primary-border-hover: var(--color-button-primary-border-default);

   --color-button-cta-secondary-text-default: var(--color-highlight-primary-default);
   --color-button-cta-secondary-text-hover: var(--color-highlight-primary-hover);
   --color-button-cta-secondary-background-default: var(--color-white);
   --color-button-cta-secondary-background-hover: var(--color-info_subtle);
   --color-button-cta-secondary-border-default: var(--color-highlight-primary-default);
   --color-button-cta-secondary-border-hover: var(--color-highlight-primary-hover);

   --color-header-background: var(--color-white);
   --color-header-text-default: var(--color-text-primary-default);
   --color-header-text-hover: var(--color-highlight-primary-hover);
   --color-header-shadow: transparent;

   --color-main-background: var(--color-white);

   --color-topicGraphicSidebar-background-default: var(--color-navigation-background);
   --color-topicGraphicSidebar-shadow-default: transparent;

   --color-breadcrumbs-text: var(--color-grey-10);
   --color-breadcrumbs-home: var(--color-grey-10);
   --color-breadcrumbs-separator: var(--color-grey-10);

   --color-footer-home: var(--color-breadcrumbs-home);
   --color-footer-breadcrumbs-text: var(--color-grey-10);
   --color-footer-background: var(--color-navigation-background);
   --color-footer-shadow: transparent;

   --color-scrollbar-thumb-light: var(--color-white);
   --color-scrollbar-thumb-light-transparent: var(--color-white-t50);
   --color-scrollbar-thumb-dark: var(--color-grey-08);

   --color-sidebar-background: var(--color-navigation-background);
   --color-sidebar-shadow: transparent;
   --color-sidebar-overlay: var(--color-white-t50);
   --color-sidebar-text-default: var(--color-grey-10);
   --color-sidebar-text-hover: var(--color-hover);
   --color-sidebar-close-icon: var(--color-grey-10);

   --color-badge-text: var(--color-grey-10);
   --color-badge-background: var(--color-white);

   --color-langswitch-headline: var(--color-sidebar-text-default);
   --color-langswitch-text-default: var(--color-grey-10);
   --color-langswitch-text-hover: var(--color-hover);
   --color-langswitch-text-active: var(--color-interactive);

   --color-hint-text: var(--color-grey-10);
   --color-hint-background: var(--color-white);

   --color-navbar-background: var(--color-navigation-background);
   --color-navbar-spacer-background: var(--color-navigation-background);
   --color-navbar-shadow: transparent;
   --color-navbar-overlay: var(--color-white-t50);
   --color-navbar-close: var(--color-grey-10);
   --color-navbar-menu: var(--color-grey-10);
   --color-navbar-text-default: var(--color-grey-10);
   --color-navbar-menu-entry-background-default: transparent;
   --color-navbar-menu-entry-background-hover: var(--color-grey-05);
   --color-navbar-menu-entry-text-hover: var(--color-hover);
   --color-navbar-menu-entry-current-text-default: var(--color-interactive);
   --color-navbar-menu-entry-current-text-hover: var(--color-hover);
   --color-navbar-menu-entry-current-background-default: transparent;
   --color-navbar-menu-entry-current-background-hover: transparent;
   --color-navbar-menu-entry-current-icon-default: var(--color-interactive);
   --color-navbar-menu-entry-current-icon-hover: var(--color-hover);
   --color-navbar-globallinks-default: var(--color-grey-10);
   --color-navbar-globallinks-hover: var(--color-hover);
   --color-navbar-globallinks-visited: var(--color-grey-10);
   --color-navbar-toggle-text-default: var(--color-grey-10);
   --color-navbar-toggle-text-hover: var(--color-hover);
   --color-navbar-toggle-text-disabled: var(--color-grey-medium);
   --color-navbar-toggle-background-default: var(--color-white);
   --color-navbar-toggle-background-hover: var(--color-white);
   --color-navbar-toggle-border-active: var(--color-focus);

   --color-search-background: transparent;
   --color-search-border: var(--color-grey-09);
   --color-search-input-background: var(--color-grey-03);
   --color-search-input-text: var(--color-grey-10);
   --color-search-input-placeholder: var(--color-grey-medium);
   --color-search-input-icon: var(--color-grey-09);
   --color-search-submit-icon-default: var(--color-grey-09);
   --color-search-delete-icon-default: var(--color-grey-09);
   --color-search-delete-icon-hover: var(--color-hover);
   --color-search-filter-label-text-default: var(--color-grey-10);
   --color-search-filter-label-text-hover: var(--color-hover);
   --color-search-filter-label-text-active: var(--color-grey-10);
   --color-search-filter-icon-default: var(--color-grey-10);
   --color-search-filter-icon-hover: var(--color-hover);
   --color-search-filter-background-default: var(--color-grey-03);
   --color-search-filter-background-active: var(--color-grey-03);
   --color-search-filter-background-hover: var(--color-grey-03);
   --color-search-filter-border-default: var(--color-grey-09);
   --color-search-filter-border-active: var(--color-grey-09);
   --color-search-filter-border-hover: var(--color-grey-09);
   --color-search-filteritem-text-default: var(--color-grey-10);
   --color-search-filteritem-text-hover: var(--color-hover);
   --color-search-filteritem-text-active: var(--color-grey-10);
   --color-search-filteritem-checkbox-background-default: transparent;
   --color-search-filteritem-checkbox-default: var(--color-grey-10);
   --color-search-filteritem-checkbox-icon-default: var(--color-grey-10);
   --color-search-filteritem-background-default: transparent;
   --color-search-filteritem-background-hover: transparent;
   --color-search-filteritem-background-active: transparent;

   --color-homegraphic-hotspot-text-default: var(--color-grey-10);
   --color-homegraphic-hotspot-background-default: var(--color-white);
   --color-homegraphic-hotspot-background-hover: var(--color-white);
   --color-homegraphic-hotspot-border-default: var(--color-grey-10);
   --color-homegraphic-hotspot-icon-default: var(--color-grey-10);
   --color-homegraphic-mobile-link-border: var(--color-grey-10);
   --color-homegraphic-mobile-link-text-default: var(--color-grey-10);
   --color-homegraphic-mobile-link-background-hover: var(--color-white);

   --color-search-results-text: var(--color-grey-10);
   --color-search-results-headline: var(--color-grey-10);
   --color-search-results-item-name-default: var(--color-grey-10);
   --color-search-results-item-type-default: var(--color-info);
   --color-search-results-sub-item-name-default: var(--color-grey-10);
   --color-search-results-item-arrow-default: var(--color-grey-10);
   --color-search-results-item-chevron-default: var(--color-grey-10);
   --color-search-results-pagination-text: var(--color-grey-10);
   --color-search-results-pagination-button: var(--color-grey-10);

   --color-content-text: var(--color-grey-10);
   --color-content-headline: var(--color-grey-10);
   --color-content-noassets-preview-background: var(--color-grey-03);

   --color-assettile-text: var(--color-grey-10);
   --color-assettile-text-type: var(--color-info);
   --color-assettile-text-title: var(--color-grey-10);
   --color-assettile-text-title-hover: var(--color-hover);
   --color-assettile-background: var(--color-grey-07);
   --color-assettile-info-background-default: var(--color-grey-02);
   --color-assettile-info-background-hover: var(--color-grey-02);
   --color-assettile-shadow: transparent;
   --color-assettile-gradient-start: var(--color-black-t50);
   --color-assettile-gradient-end: rgba(0, 0, 0, 0);
   --color-assettile-favorite-unselected-default: var(--color-white);
   --color-assettile-favorite-unselected-hover: var(--color-info_subtle);
   --color-assettile-favorite-selected-default: var(--color-white);
   --color-assettile-favorite-selected-hover: var(--color-info_subtle);
   --color-assettile-download-gradient-start: var(--color-black-t50);
   --color-assettile-download-gradient-end: rgba(0, 0, 0, 0);
   --color-assettile-download-icon: var(--color-white);
   --color-assettile-scheduled-icon: var(--color-white);
   --color-assettile-fallback-icon: var(--color-white);
   --color-assettile-scope-icon-default: var(--color-white);
   --color-assettile-scope-icon-hover: var(--color-info_subtle);

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

   --color-asset-background: var(--color-backdrop-dark);
   --color-asset-website-text: var(--color-white);
   --color-asset-website-title: var(--color-white);
   --color-asset-website-description: var(--color-white);
   --color-asset-website-description-link: var(--color-white);
   --color-asset-website-headline-line: transparent;
   --color-asset-website-link-text: var(--color-white);
   --color-asset-website-link-text-hover: var(--color-white);
   --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-white);
   --color-asset-control-button-icon-hover: var(--color-white);
   --color-asset-control-button-background-default: var(--color-highlight-primary-default);
   --color-asset-control-button-background-hover: var(--color-highlight-primary-hover);
   --color-asset-control-button-background-active: var(--color-highlight-primary-hover);
   --color-asset-control-button-border-default: var(--color-highlight-primary-default);
   --color-asset-control-button-border-hover: var(--color-highlight-primary-hover);
   --color-asset-control-button-border-focus: var(--color-highlight-primary-hover);
   --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-hover);
   --color-asset-navigation-button-icon-default: var(--color-white);
   --color-asset-navigation-button-icon-hover: var(--color-white);
   --color-asset-navigation-button-icon-active: var(--color-white);
   --color-asset-pages-text: var(--color-text-primary-default);
   --color-asset-pages-background: var(--color-grey-03);
   --color-asset-pages-shadow: var(--color-black-t30);
   --color-asset-pages-page-background-default: var(--color-grey-03);
   --color-asset-pages-page-text-default: var(--color-text-primary-default);
   --color-asset-pages-navigation-background-default: var(--color-interactive);
   --color-asset-pages-navigation-background-active: var(--color-hover);
   --color-asset-pages-navigation-background-hover: var(--color-hover);
   --color-asset-pages-navigation-after-focus-border-default: var(--color-focus);
   --color-asset-video-playbutton-icon-default: var(--color-white);
   --color-asset-video-playbutton-icon-hover: var(--color-white);
   --color-asset-video-playbutton-background-default: var(--color-highlight-primary-default);
   --color-asset-video-playbutton-background-hover: var(--color-highlight-primary-hover);
   --color-asset-video-playbutton-border-default: transparent;
   --color-asset-video-playbutton-border-hover: transparent;
   --color-asset-video-progressbar-background: var(--color-grey-10);
   --color-asset-video-progressbar-progress: var(--color-white);
   --color-asset-video-volumefader-background: var(--color-grey-10);
   --color-asset-video-volumefader-volume: var(--color-white);
   --color-asset-video-controls-container-background: var(--color-black-t50);
   --color-asset-video-controls-fore: var(--color-black-t50);
   --color-asset-video-control-button: var(--color-white);
   --color-asset-video-time-text: var(--color-white);
   --color-asset-pdf-loadingIndicatorProgress: var(--color-highlight-primary-default);

   --color-dialog-content-text: var(--color-text-primary-default);
   --color-dialog-content-icon: var(--color-text-primary-default);
   --color-dialog-background: var(--color-backdrop-dark);
   --color-dialog-content-background: var(--color-white);
   --color-dialog-content-button-confirm-text-default: var(--color-button-primary-text-default);
   --color-dialog-content-button-confirm-text-default-hover: var(--color-dialog-content-button-confirm-text-default);
   --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-background-default);
   --color-dialog-content-button-confirm-border-hover: var(--color-button-primary-background-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-highlight-primary-default);
   --color-dialog-content-button-refuse-text-hover: var(--color-highlight-primary-hover);
   --color-dialog-content-button-refuse-text-active: var(--color-dialog-content-button-refuse-text-default);
   --color-dialog-content-button-refuse-background-default: transparent;
   --color-dialog-content-button-refuse-border-default: var(--color-button-primary-background-default);
   --color-dialog-content-button-refuse-border-hover: var(--color-button-primary-background-hover);
   --color-dialog-content-button-refuse-border-active: var(--color-dialog-content-button-refuse-border-default);

   --color-tooltip-text: var(--color-black);
   --color-tooltip-background: var(--color-white);

   /* modifications */

   /* for now only a light color-scheme is defined */
   color-scheme: only light;

   .logo {
      --logo-height: calc(var(--header-height, 96px) / 2);
      width: unset;
      max-width: 4.8rem;
      max-height: 4.8rem;

      /* 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;
   }

   .search button.search-submit {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;

      svg {
         width: unset;
         height: unset;
      }
   }

   .sidebar {
      border-radius: 0;
   }

   .sidebar-close {
      --icon-size: 2.4rem;
   }

   .navbar .navbar-close {
      width: 2.4rem;
      height: 2.4rem;
   }

   .navigationSidebar {
      background-color: var(--color-grey-11);

      button {
         background-color: var(--color-grey-11);

         &:hover {
            background-color: var(--color-grey-10);
         }
      }

      button[class*='sidebarButton--active'] {
         box-shadow: 3px 0 var(--color-info) inset;
      }
   }

   .menu-level a.up-link:hover {
      border-radius: 3px;
      background-color: var(--color-grey-05) !important;
   }

   .breadcrumbs-links li {
      a,
      span {
         font-size: 1.4rem;
      }

      &:last-child span {
         font-family: inherit;
         color: var(--color-grey-medium);
      }
   }

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

      .button.button--text.button--secondary {
         border-radius: 3px;

         span {
            text-transform: unset;
         }
      }
   }

   .home-assets a,
   .cta-panel .button {
      border-width: 1px;
      border-radius: 3px;
   }

   .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-white);
   }

   button[class*='hotspot'] {
      color: var(--color-button-secondary-text-default);
      fill: var(--color-button-secondary-text-default);
      border-color: var(--color-button-secondary-border-default) !important;
      background: var(--color-button-secondary-background-default);

      &:hover {
         color: var(--color-button-secondary-text-hover);
         fill: var(--color-button-secondary-text-hover);
         border-color: var(--color-button-secondary-border-hover) !important;
         background: var(--color-button-secondary-background-hover);
      }
   }

   div.topicGraphic-elementConnectors,
   div[class*='homeGraphic-elementConnectors'] {
      svg g {
         stroke: var(--color-info);
      }
   }

   div[class*='homeGraphic-miniMenu'] {
      button {
         color: var(--color-button-secondary-text-default);
         border-color: var(--color-button-secondary-text-default);
         background-color: var(--color-button-secondary-background-default);

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