dspace-angular/src/styles/_custom_variables.scss

:root {
  --ds-content-spacing: #{$spacer}; // equivalent to Bootstrap spaces of size 3

  --ds-button-height: #{$input-btn-padding-y * 2 + $input-btn-line-height + calculateRem($input-btn-border-width*2)};

  --ds-card-height-percentage:98%;
  --ds-card-thumbnail-height:240px;
  --ds-dropdown-menu-max-height: 200px;
  --ds-drop-zone-area-height: 44px;
  --ds-drop-zone-area-z-index: 1025;
  --ds-drop-zone-area-inner-z-index: 1021;
  --ds-login-logo-height:72px;
  --ds-login-logo-width:72px;
  --ds-submission-header-z-index: 1001;
  --ds-submission-footer-z-index: 999;
  --ds-live-region-z-index: 1030;

  --ds-main-z-index: 1;
  --ds-nav-z-index: 10;
  --ds-footer-z-index: 0;
  --ds-sidebar-z-index: 20;

  --ds-header-bg: #{$ds-header-bg};
  --ds-header-icon-color: #{$ds-header-icon-color};
  --ds-header-icon-color-hover: #{$ds-header-icon-color-hover};

  --ds-navbar-bg: #{$ds-navbar-bg};
  --ds-navbar-item-vertical-padding: 0;
  --ds-navbar-item-horizontal-padding: 0.25rem;
  --ds-navbar-dropdown-bg: #{$ds-navbar-dropdown-bg};
  --ds-navbar-dropdown-item-vertical-padding: 0.5rem;
  --ds-navbar-dropdown-item-horizontal-padding: 1rem;
  --ds-navbar-link-color: #{$ds-navbar-link-color};
  --ds-navbar-link-color-hover: #{$ds-navbar-link-color-hover};

  --ds-header-navbar-border-top-color: #{$ds-header-navbar-border-bottom-color};
  --ds-header-navbar-border-bottom-color: #{$ds-header-navbar-border-bottom-color};

  --ds-expandable-navbar-bg: #{$ds-expandable-navbar-bg};
  --ds-expandable-navbar-link-color: #{$body-color};
  --ds-expandable-navbar-link-color-hover: #{$body-color};
  --ds-expandable-navbar-link-background-hover: #{$ds-navbar-link-color-hover};
  --ds-expandable-navbar-item-vertical-padding: 0.25rem;

  --ds-user-menu-item-vertical-padding: 0.25rem;
  --ds-user-menu-dropdown-padding: 1rem;
  --ds-user-menu-dropdown-link-color: #{$dark};
  --ds-user-menu-dropdown-link-background-hover: #{$gray-200};

  @include media-breakpoint-up(md) {
    --ds-header-logo-height: 50px;
  }
  @include media-breakpoint-down(sm) {
    --ds-header-logo-height: 50px;
  }

  --ds-admin-sidebar-bg: #{$ds-admin-sidebar-bg};
  --ds-admin-sidebar-active-bg: #{$ds-admin-sidebar-active-bg};
  --ds-admin-sidebar-header-bg: #{darken($ds-admin-sidebar-bg, 7%)};
  --ds-admin-sidebar-logo-height: 20px;
  --ds-admin-sidebar-fixed-element-width: #{$ds-admin-sidebar-fixed-element-width};
  --ds-admin-sidebar-fixed-element-z-index: 10;
  --ds-admin-sidebar-collapsible-element-width: #{$ds-admin-sidebar-collapsible-element-width};
  --ds-admin-sidebar-total-width: #{$ds-admin-sidebar-total-width};
  --ds-admin-sidebar-link-color: #{$navbar-dark-color};
  --ds-admin-sidebar-link-hover-color: #{$navbar-dark-hover-color};
  --ds-admin-sidebar-item-padding: 1rem;
  --ds-admin-sidebar-section-indent: .75rem;

  --ds-dark-scrollbar-bg: #{$ds-admin-sidebar-active-bg};
  --ds-dark-scrollbar-alt-bg: #{lighten($ds-admin-sidebar-active-bg, 2%)};
  --ds-dark-scrollbar-fg: #{$ds-admin-sidebar-fg};
  --ds-dark-scrollbar-width: 8px;

  --ds-submission-sections-margin-bottom: .5rem;

  --ds-edit-item-button-min-width: 100px;
  --ds-edit-item-metadata-field-width: 190px;
  --ds-edit-item-language-field-width: 43px;

  --ds-thumbnail-max-width: 125px;
  --ds-thumbnail-placeholder-background: #{$gray-100};
  --ds-thumbnail-placeholder-border: 1px solid #{$gray-300};
  --ds-thumbnail-placeholder-color: #{lighten($gray-800, 7%)};

  --ds-dso-selector-list-max-height: 475px;
  --ds-dso-selector-current-background-color: #eeeeee;
  --ds-dso-selector-current-background-hover-color: #{darken(#eeeeee, 10%)};
  --ds-notification-bg-success: #{darken(adjust-hue($success, -10), 10%)};
  --ds-notification-bg-danger: #{darken(adjust-hue($danger, -10), 10%)};
  --ds-notification-bg-info: #{darken(adjust-hue($info, -10), 10%)};
  --ds-notification-bg-warning: #{darken(adjust-hue($warning, -10), 10%)};

  --ds-top-footer-bg: #{$gray-200};
  --ds-footer-bg: #{theme-color('primary')};
  --ds-footer-border: 1px solid var(--bs-gray-400);
  --ds-footer-padding: 0;
  --ds-footer-padding-bottom: 0;
  --ds-footer-logo-height: 50px;

  --ds-home-news-link-color: #{$ds-home-news-link-color};
  --ds-home-news-link-hover-color: #{darken($ds-home-news-link-color, 15%)};
  --ds-home-news-background-color: #{$gray-200};

  --ds-breadcrumb-bg: #{$gray-200} !important;
  --ds-breadcrumb-link-color: #{$ds-breadcrumb-link-color};
  --ds-breadcrumb-link-active-color: #{$ds-breadcrumb-link-active-color};
  --ds-breadcrumb-max-length: 200px;

  --ds-slider-color: #{$ds-slider-color};
  --ds-slider-handle-width: 18px;
  --ds-slider-handle-color: #{darken($blue, 17%)};

  --ds-search-form-scope-max-width: 150px;

  --ds-context-x-offset: -16px;
  --ds-context-help-icon-size: 16px;
  --ds-context-help-tooltip-width: 300px;
  --ds-context-help-tooltip-link-color: $white;

  --ds-gap: 0.25rem;

  --ds-dso-edit-field-width: 210px;
  --ds-dso-edit-lang-width: 90px;
  --ds-dso-edit-actions-width: 173px;
  --ds-dso-edit-virtual-tooltip-min-width: 300px;

  --ds-comcol-logo-max-width: 500px;
  --ds-comcol-logo-max-height: 500px;

  --ds-primary-bg: #{$ds-primary-bg};
  --ds-secondary-bg: #{$ds-secondary-bg};
  --ds-success-bg: #{$ds-success-bg};
  --ds-info-bg: #{$ds-info-bg};
  --ds-warning-bg: #{$ds-warning-bg};
  --ds-danger-bg: #{$ds-danger-bg};

  --green1: #1FB300;  // This variable represents the success color for the Klaro cookie banner
  --button-text-color-cookie: #333; // This variable represents the text color for buttons in the Klaro cookie banner
}