/*
  Responsive styling. Breakpoints are taken from Django 3.2 admin/css/responsive.css.

  Note that you can not use CSS variables in media queries, so old-school sass variables
  it is here.
*/
$djai-breakpoint--mobile: 767px;
$djai-breakpoint--tablet: 1024px;

/* admin-index specific variables */

// compensate for the sticky header by offsetting the nav sidebar. Default values
// come from a clean django-startproject on Django 3.2 with the standard admin CSS.
// If you use different fonts/paddings... etc, you can override this variable for your
// own situation.
$_default-nav-sidebar-offset: 10px + 28px + 46px;  // heading padding top + branding height + dropdown-menu

/*
  Define the CSS variable default values. These can be overridden by custom stylesheets,
  provided they are loaded AFTER the admin-index.css stylesheet is loaded OR they use
  a more specific selector than the :root pseudo-selector.

  We mostly refer to the built-in CSS variables from Django 3.2+ (see the reference in
  admin/css/base.css).
*/

:root {
  --djai-tab-bg: #4383a3;
  --djai-tab-bg--active: var(--primary);
  --djai-tab-bg--hover: var(--primary);
  --djai-tab-fg: var(--primary-fg);
  --djai-tab-fg--active: var(--primary-fg);
  --djai-tab-fg--hover: var(--primary-fg);

  --djai-dropdown-bg: var(--secondary);
  --djai-dropdown-bg--active: var(--primary);
  --djai-dropdown-bg--hover: var(--primary);
  --djai-dropdown-fg: var(--header-link-color);

  // default of 10px is the padding-bottom default of the header
  --djai-tablist-spacing-top: 10px;
  --djai-nav-sidebar-offset: #{$_default-nav-sidebar-offset};
}

// TODO: dark theme variables
