@use "sass:math";

// Color system
//

$white: #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black: #000 !default;

// color names must follow alias of the parent page in TYPO3 ("strom" => body.parent-strom)

$primary: rgb(0, 153, 153);
$primary-light: #c7e7e8;
$primary-lighter: #e9f6f6;
//$primary-dark: fade_out(scale_color($primary, $lightness: -70%, $saturation: -50%), .33);
$primary-dark: scale_color($primary, $lightness: -70%, $saturation: -50%);
$secondary: rgb(240, 189, 0);

$light: #e9f6f6;
$dark: $primary-dark;

// Customize the light and dark text colors for use in our color contrast function.
$color-contrast-dark: $dark;
$color-contrast-light: $white;
$min-contrast-ratio: 3.4;

// Options

$enable-rounded: false;
$enable-important-utilities: false;
$enable-dark-mode: false;

// Prefix for :root CSS variables

$prefix: bs-;

// Spacing

$spacer: 1rem;

$frame-spacer: 1rem;
$frame-spacers: (
        none: inherit,
        extra-small: clamp(calc($spacer * .5), 1vw, calc($spacer * 2)),
        small: clamp(calc($spacer * 1), 2vw, calc($spacer * 3)),
        medium: clamp(calc($spacer * 2), 3vw, calc($spacer * 4)),
        large: clamp(calc($spacer * 3), 5vw, calc($spacer * 5)),
        extra-large: clamp(calc($spacer * 4), 8vw, calc($spacer * 6)),
);

// Body
//
// Settings for the `<body>` element.

$body-color: $gray-600;
$body-bg: $white;
$body-secondary-color: $secondary;

// Navbar

//$navbar-nav-link-padding-x: 1rem;
//$nav-link-height: $font-size-lg * $line-height-base + $nav-link-padding-y * 2;

//
$nav-main-height: ();
$nav-main-height: map-merge((
        "md": 110px,
        "lg": 110px,
        "xl": 128px,
        "xxl": 128px
), $nav-main-height);

// Links
//
// Style anchor elements.

$link-color: $body-color;
//$link-decoration: none;
$link-hover-color: darken($link-color, 15%);
$link-hover-decoration: underline;

$navbar-logo-width: calc(15vw);
$navbar-logo-width-max: calc(142px + 4rem);

$navbar-dark-color: $primary-light;
$navbar-dark-hover-color: $secondary;
$navbar-dark-active-color: $secondary;
$navbar-dark-disabled-color: rgba($navbar-dark-color, .25);

$navbar-light-color: scale_color($primary, $lightness: 00%, $saturation: -85%);
$navbar-light-hover-color: scale_color($primary, $lightness: 0%, $saturation: 0%);
$navbar-light-hover-color: $secondary;
$navbar-light-active-color: $primary;
$navbar-light-disabled-color: rgba($navbar-light-color, .25);

$navbar-light-brand-color: $primary;
$navbar-light-brand-hover-color: $primary;
$navbar-dark-brand-color: $primary;
$navbar-dark-brand-hover-color: $primary;

// Grid columns

$grid-gutter-width: 2rem;

// Grid breakpoints
//
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.

// scss-docs-start grid-breakpoints
$grid-breakpoints: (
        xs: 0,
        sm: 576px,
        md: 768px,
        lg: 992px,
        xl: 1200px,
        xxl: 1520px
) !default;
// scss-docs-end grid-breakpoints

@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");

// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

// scss-docs-start container-max-widths
$container-max-widths: (
        sm: null,
        md: null,
        lg: null,
        xl: 1140px,
        xxl: 1440px
) !default;
// scss-docs-end container-max-widths

// Container padding

$container-padding-x: 16vw;

// Fonts
$font-family-sans-serif: "Frutiger W01", sans-serif;

$font-size-base: 1rem;
$font-size-sm: ($font-size-base * .875);
$font-size-lg: ($font-size-base * 1.275);

$h1-font-size: $font-size-base * 4;
$h2-font-size: $font-size-base * 1.75;
$h3-font-size: $font-size-base * 1.4;
$h4-font-size: $font-size-base * 1;

$font-sizes: (
        1: $h1-font-size,
        2: $h2-font-size,
        3: $h3-font-size,
        4: $h4-font-size,
        sm: $font-size-sm,
        lg: $font-size-lg,
);

$headings-margin-bottom: $spacer;
//$headings-font-family: inherit;
$headings-font-weight: 300;
//$headings-line-height: 1.2;
$headings-color: $primary;

$lead-font-size: $font-size-base;
$lead-font-weight: 600;

// Tooltips
$tooltip-max-width: 400px;

// Breadcrumbs
$breadcrumb-divider: '›';
$breadcrumb-margin-bottom: 0;
$breadcrumb-padding-x: 0;

// Tables

// Tables
//
// Customizes the `.table` component with basic values, each used across all table variations.

$table-cell-padding-y: .4rem !default;
$table-cell-padding-x: .6rem !default;
$table-cell-padding-y-sm: .2rem !default;
$table-cell-padding-x-sm: .4rem !default;

$table-color: inherit;
$table-bg: transparent;
$table-border-color: $gray-500;

$table-caption-color: unset;
//$table-striped-bg: $primary-light;
//$table-accent-bg: $gray-300;
//$table-hover-color: $table-color;
//$table-hover-bg: rgba($black, .075);
//$table-active-bg: $table-hover-bg;

//$table-border-width:          $border-width ;
//$table-border-color:          $border-color ;
//$table-border-color:          darken($border-color,25) ;
//
//$table-head-bg: $gray-200;
//$table-head-color: $gray-700;
//
//$table-head-fontsize: $font-size-base;
//$table-body-fontsize: $font-size-base;
//
//$table-dark-color: $white;
//$table-dark-bg: $primary;
//$table-dark-accent-bg: rgba($white, .05);
//$table-dark-hover-color: $table-dark-color;
//$table-dark-hover-bg: rgba($white, .075);
//$table-dark-border-color: lighten($table-dark-bg, 7.5%);
//$table-dark-color: $white;

// Cards

$card-spacer-y: 1rem;
$card-spacer-x: 1rem;
$card-border-width: 0;
$card-border-color: rgba($black, .125);
$card-cap-bg: rgba($black, .03);
$card-cap-color: null;
$card-color: null;
$card-bg: $gray-100;

$card-group-margin: calc($grid-gutter-width / 4);
$card-deck-margin: $card-group-margin;

$modal-backdrop-bg: scale_color($primary, $lightness: -50%);
$modal-backdrop-opacity: .8;

$box-shadow: 0 0 2rem rgba($black, .1);

// Pagination

$pagination-color: $link-color;
$pagination-bg: $white;
//$pagination-border-width:           $border-width;
$pagination-border-color: $gray-300;

//$pagination-focus-box-shadow:       $input-btn-focus-box-shadow;
$pagination-focus-outline: 0;

$pagination-hover-color: $link-hover-color;
$pagination-hover-bg: $gray-200;
$pagination-hover-border-color: $gray-300;

$pagination-active-color: $white;
$pagination-active-bg: $primary;
$pagination-active-border-color: $pagination-active-bg;

$pagination-disabled-color: $gray-600;
$pagination-disabled-bg: $white;
$pagination-disabled-border-color: $gray-300;

$accordion-bg: $gray-100;
$accordion-border-color: $gray-400;
$accordion-padding-x: $card-spacer-x * 2;
$accordion-button-bg: $gray-200;
$accordion-button-active-bg: $gray-300;
$accordion-button-active-color: $gray-800;
$accordion-button-focus-box-shadow: 0;

// Forms
$form-text-color: rgba(var(--#{$prefix}body-color-rgb), .8);
