/*
 * This file contains and imports scss variables.
 * It is also used to override default styling to design custom styles.
 *
 * ⚠️ This file must not contain any css rules. It is imported in many places,
 * and css rules in this file would result in a copy of all of the rules per import.
 */

// Wait til 5.2.0 to get better map overrides
// https://github.com/twbs/bootstrap/pull/34942
// https://github.com/twbs/bootstrap-rubygem/issues/141
@import "../../../node_modules/bootstrap/scss/functions";

/*
 * Masterportal Default Style (Override of Bootstrap)
 */

// Options
//
// Quickly modify global styling by enabling or disabling optional features.

$enable-caret:                false;
$enable-shadows:              true;

// Links
//
// Style anchor elements.

$link-color: #337ab7;
$link-decoration: none;

// Typography
//
// Font, line-height, and color for body text, headings, and more.
// In the case of Masterportal, the base size is 16 px, the browser's default, as we do set a base font but not in the html tag.
// We set the base variable to 14px. This is the base that Bootstrap uses internally to calculate sizes (such as $font-size-sm)

$font-size-base: 1rem;

// Buttons + Forms
//
// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.

$input-btn-font-size: $font-size-base * 0.875;

// Forms

// $input-font-size: $input-btn-font-size;

// Navs

$nav-link-padding-y: 0.9375rem;

// Navbar

$navbar-padding-y: 0;

$navbar-nav-link-padding-x: 0.9375rem;

$navbar-toggler-padding-x: .625rem;
$navbar-toggler-focus-width: 0;

$badge-border-radius: 10px;
$font-family-sans-serif: MasterPortalFont, Arial, sans-serif;
$icon-font-path: "fonts/";

$bootstrap-icons-font-src: url("../../../node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff2?a74547b2f0863226942ff8ded57db345") format("woff2"),
url("../../../node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff2?a74547b2f0863226942ff8ded57db345") format("woff") !default;

// Colors

/* light_grey
 * Used for backgrounds and light elements that are not necessarily primary.
 * Elements: Buttons and button-like elements, borders, backgrounds
 */
$light_grey: #E3E3E3;
$light_grey_hover: lighten($light_grey, 5%);
$light_grey_focus: lighten($light_grey, 15%);
$light_grey_active: darken($light_grey, 10%);
$light_grey_contrast: #ffffff;
$light_grey_inactive: darken($light_grey, 20%);
$light_grey_inactive_contrast: #424242;
$light_grey_outline: #050505;

/* PRIMARY: The primary buttons blue
* Used for primary buttons like start a search, print etc.
*/
$dark_blue: #151C27;
$primary: #D6E3FF;
$secondary: #3C5F94;
$white: #ffffff;
$black: #000;
$light_red: #E10019;
$dark_grey: #424242;
$light_blue: #DCE2F3;

$placeholder-color: lighten($dark_grey, 30%);
$navbar-light-color: $dark_grey;

$table-striped-bg: $light_blue;
$table-hover-bg: darken($light_blue, 20%);

$component-active-bg: $dark_blue;
$accordion-active-color: $dark_blue;

/* SECONDARY: Navigation & secondary buttons/elements
 * Used for the nav bar, its children, and going back and forth within elements.
 * Elements: Navigation bars and togglers, overall content.
 * Examples: NavBar, open/close tool, layer list, cancel Buttons ...
 */
// $secondary: $white;
// $secondary_contrast: $dark_blue;
// $secondary_hover: $light_blue;
// $secondary_active: $dark_blue;
// $secondary_active_contrast: $light_blue;
// $secondary_focus: $dark_blue;
// $secondary_focus_contrast: $light_blue;
$secondary_table_style: #F2F2F2;  // background for table view style

/*ToDo: bei neuem bootstrap update hoffentlich möglich*/
// .btn-secondary {
//   --bs-btn-color: $secondary_contrast;
//   --bs-btn-bg: $secondary;
//   --bs-btn-border-radius: 50px;
//   --bs-btn-hover-color: $secondary_contrast;
//   --bs-btn-hover-bg: $secondary_hover;
//   --bs-btn-active-color: $secondary_active_contrast;
//   --bs-btn-active-bg: $secondary_active;
//   --bs-btn-focus-color: $secondary_focus_contrast;
//   --bs-btn-focus-bg: $secondary_focus;
//   --bs-btn-box-shadow: none;
// }

.btn-primary {
  --bs-btn-color: #001B3D;
  --bs-btn-bg: #D6E3FF;
  --bs-btn-border-radius: 16px;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #001B3D;
  --bs-btn-hover-border-color: #001B3D;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #151C27;
  --bs-btn-focus-color: #fff;
  --bs-btn-focus-bg: #151C27;
}
.btn-secondary {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: #3C5F94;
  --bs-btn-border-color: #3C5F94;
  --bs-btn-border-radius: 50px;
  --bs-btn-hover-color: #001B3D;
  --bs-btn-hover-bg: #D6E3FF;
  --bs-btn-hover-border-color: #D6E3FF;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #151C27;
  --bs-btn-focus-color: #fff;
  --bs-btn-focus-bg: #151C27;
  --bs-btn-box-shadow: none;
}

.btn-light {
  --bs-btn-color: #151C27;
  --bs-btn-bg: #ffffff;
  --bs-btn-border-color: #ffffff;
  --bs-btn-border-radius: 50px;
  --bs-btn-disabled-opacity: 0.3;
  --bs-btn-hover-color: #151C27;
  --bs-btn-hover-bg: #DCE2F3;
  --bs-btn-hover-border-color: #DCE2F3;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #151C27;
  --bs-btn-focus-color: #fff;
  --bs-btn-focus-bg: #151C27;
  --bs-btn-box-shadow: none;
}

/*
 * switches and checkboxes
 */

$form-check-input-checked-bg-color: #001B3D;
$form-check-input-border: 1px solid #75777D;
$form-check-input-focus-border: 1px solid #75777D;

/*
 * Inputs
 */
$input-focus-border-color: #3C5F94;

/* ACCENT: Action
 * Action color for certain special accents
 * Examples: fileImport, routing
 */
$accent: $light_blue;
$accent_hover: #DCE2F3;
$accent_focus: #204d74;
$accent_active: #204d74;
$accent_disabled: #7aa9d0;
$accent_contrast: #ffffff;


/* NOTIFICATION COLOURS
 * Notification colours can and should be used directly from Bootstrap 3.
 * Keywords: success, warning, danger, info
 * note: for the geo-online Masterportal these are usually not needed and should be discussed before using.
 */
$danger: $light_red;

// Dropdowns
//
// Dropdown menu container and contents.

$dropdown-spacer: 0;
$dropdown-link-hover-bg: transparent;
$dropdown-link-active-bg: transparent;

// List group

$dropdown-item-disabled-bg:  #eeeeee;

// Menu
$menu-background-color: $white;

/* ICON SIZES */
$icon_length: 2.25rem;
$icon_length_small: 1.5rem;
$icon_length_menu: 0; // TODO figure out correct value before usage
$icon_length_list: 0; // TODO figure out correct value before usage

/* FONT STYLES */
$font_family_default: "MasterPortalFont", "Arial", sans-serif;
$font_family_narrow: "MasterPortalFont", "Arial Narrow", Arial, sans-serif;
$font_family_accent: "MasterPortalFont Bold", "Arial Narrow Bold", Arial, sans-serif;

/* NOTE we use bootstrap font-sizes and only add font-sizes if really necessary
 * bootstrap sizes:
 * $font-size-base = 12px (see this file)
 * $font-size-sm = 10.5px (based on 12px base font size)
 * $font-size-lg = 15px (based on 12px base font size)
 * for different base-size the font sizes will be different as well, see variables.md
 */

$font_size_sm: $font-size-base * 0.857;
$font_size_big: $font-size-base * 1.167;
$font_size_huge: $font-size-base * 2;
$font_size_icon_lg: $font-size-base * 1.33;

$btn-font-size: 1rem;

/* tool sizes */
$content_upper_space: 2.5rem;
$content_section_space: 2rem;
$content_space: 1rem;
// Padding used for the Tool windows
$padding: 1.5rem;

/* other */
$shadow: rgba(0, 0, 0, 0.176);
$shadow_overlay: rgba(0, 0, 0, 0.4);
$tool_box_shadow: 0 6px 12px rgba(0, 0, 0, 0.176);


/*
 * Customer Style. In this place, all previously mentioned variables may be overwritten
 * to achieve a different look and feel from the default Masterportal design.
 *
 * Please note that the theme is currently under development and only used in some parts of the
 * application - changes will have limited effects.
 */

// ... $brand-primary: #000;

/*
* Imports from Bootstrap
*/
@import "../../../node_modules/bootstrap/scss/variables";
@import "../../../node_modules/bootstrap/scss/variables-dark";
// Add old default theme color to color map
$custom-colors: (
  "default": $gray-400
);
$theme-colors: map-merge($theme-colors, $custom-colors);


@import "../../../node_modules/bootstrap/scss/maps";
@import "../../../node_modules/bootstrap/scss/mixins";


/*
 * Grid breakpoints
 *
 * Define the minimum dimensions at which your layout will change,
 * adapting to different screen sizes, for use in media queries.
 */
 $xs: 0;
 $sm: 576px;
 $md: 768px;
 $lg: 992px;
 $xl: 1200px;
 $xxl: 1400px;

$grid-breakpoints: (
  xs: $xs,
  sm: $sm,
  md: $md,
  lg: $lg,
  xl: $xl,
  xxl: $xxl
);

:export {
    gridBreakpoints: {
        xs: $xs;
        sm: $sm;
        md: $md;
        lg: $lg;
        xl: $xl;
        xxl: $xxl;
    }
}