@use "sass:string";
// -----------------------------------------------------------------------------
// This file contains all application-wide Sass variables.
// -----------------------------------------------------------------------------

$grid-breakpoints: (
        xs: 0,
        sm: 576px,
        md: 768px,
        lg: 992px,
        xl: 1200px
);

$container-max-widths: (
        sm: 540px,
        md: 720px,
        lg: 960px,
        xl: 1140px,
);

/// Regular font family
$text-font-stack: RijksSans, Calibri, sans-serif;

// Text color
$text-color: #0f172a;
$fieldset-meta: #617286; // Slighty changed from $grey-3 because of contrast


// Brand color
$brand-color: #01689b;
$brand-color-2: #154273; // Active & hover
$brand-contrast-color: #0E7C77; // groenish
$header-base-color: $brand-color-2;

// Nieuwe kleurteinten
$robijn: #cc005d;
$mintgroen: #76d2b6;
$paars: #42145f;


// Grijstinten
$white: #fff; // Background-color
$grey-0: #f8fafc;
$grey-1: #f1f5f9; // Fieldset | mainNav  | stappenindicator not visited | tbody rows
$grey-2: #e2e8f0; // thead bg | form toelichting bg
$grey-3: #617286; // Visited links | Meta // Should be #64748b (not dark enough for usage on grey-1 background)
$grey-4: #475569; // Table resoonsive labels
$grey-5: #334155; // Table resoonsive labels
$light-grey: #cccccc;
$black: #000; // Text color

// Lintblauwtinten
$lintblauw-30: #b8c6d5;


$placeholder: #6f6d6d;

// Table responsive colors.
$pro-odd-bg: #edeff5;
$pro-even-bg: #fff;

// Waarschuwingskleuren
$red: #d52b1e;
$light-red: #f9dfdd;

$yellow: #ffb612; // warning | stappenindicator active
$light-yellow: #fff4dc; // warning | stappenindicator visited
$dark-yellow: #ffb612; // Todo: replace usage of variable

$green: #39870c;
$light-green: #e1eddb;
$dark-green: #176e1b;

$blue:  #007bc7;
$light-blue: #d9ebf7;


// Stappenindicator kleuren
$step-default-color: #f8f8f9;
$step-current-color: #fada3c;
$step-finished-color: $light-yellow;


$shadow-1: rgba(0, 0, 0, .075);
$shadow-2: rgba(102, 175, 233, .6);

// Input variabelen
$input-padding-right: 70px;
$input-focus-color: $black;
$input-color: $black;
$input-border-radius: 0;
$input-height: 32px;
$input-box-shadow: none;
$input-focus-box-shadow: none;
$input-focus-border-color: $brand-color;

// Button outline overrides
$outline-color: #82befb;
$btn-active-box-shadow: none;
$btn-focus-box-shadow: none;
$btn-focus-width: 0;
$enable-shadows: false;
$pagination-focus-box-shadow: none;

$btn-primary-outline-hover-bg: #e7f2f7;
$btn-secondary-outline-hover-bg: #E9F8F6;
$btn-danger-outline-hover-bg: #fbecf0;


// Overschrijven van modal variabelen
$modal-content-border-width: 0;
$modal-content-border-radius: 2px;
$modal-header-padding-x: 1.5rem;
$modal-header-padding-y: 1.25rem;
$modal-header-padding-bottom: 0;
$modal-inner-padding: .5rem 1.5rem;
$modal-footer-padding:  .5rem 1.5rem 1.5rem;
$modal-footer-margin-between: 0;
$modal-footer-padding: .5rem 1.5rem 1.5rem 1.5rem;

//Dropdown
$dropdown-border-radius: 0;
$dropdown-padding-y: .325rem;
$dropdown-item-padding-x: .875rem;
$dropdown-item-padding-y: .275rem;
$dropdown-link-active-bg: var(--ro-form-accent-color);
$dropdown-link-active-color: $white;
$dropdown-link-hover-color: $white;
$dropdown-link-hover-bg: $brand-color;
$dropdown-link-color: $black;

// Overschrijven van badge variabelen
$primary: $brand-color;
$success: $green;
$danger: $red;

// Overschrijven tab variabelen
$nav-tabs-border-color: $grey-2;
$nav-tabs-border-radius: 0;
$nav-tabs-link-active-color: $black;
$nav-link-color: var(--ro-link-color);

// Progress bar variabelen
$progress-bar-bg: $green;
$progress-bg: $white;
$progress-border-radius: 0;
$progress-height: 6px;

// Table settings
$table-border-color: $white;
$table-group-separator-color: $white;
$table-border-width: 1px;

// SSP table
$ssp-table-border-color: $grey-2;
$ssp-table-hover-bg: $grey-0;
$ssp-table-accent-color: #01817c; //slight darker than brand-secondary
$ssp-table-tag-border-color: #ddd;

// Data block
$dt-color: $grey-3; // Term text color
$dt-font-weight: 400;

// Pagination
$pagination-active-color: $white;
$pagination-active-bg: var(--ro-pagination-color);
$pagination-color: var(--ro-pagination-color);
$pagination-line-height: 1.2381em;
$pagination-bg: $white;
$pagination-border-width: 0;
$pagination-font-size: 1.4rem;

$pagination-hover-bg: $white;
$pagination-hover-color: var(--ro-pagination-color);

// Tooltip
$tooltip-border-radius: 2px;
$tooltip-bg: var(--ro-form-accent-color);


// Button hover colors
$btn-outline-remove-bg-hover: #fff8f8;

$hr-height: 3;
$hr-opacity: 1;

// Reset bootstrap's new min heigh for form-check
$form-check-min-height: initial;

// Set pagination focus color
$pagination-focus-bg: $white;

// Custom line height for input selects to match 4.6.1 style
$form-select-bg-position: right .25rem center;

// Breadcrumb
$breadcrumb-font-size: 1rem;
$breadcrumb-divider: string.quote("\EA1C");
$breadcrumb-divider-font-size: .8rem;
$breadcrumb-divider-font-family: 'CIBG Icons', Calibri, sans-serif;
$breadcrumb-divider-pt: 0.225rem;
$breadcrumb-margin-bottom: 0;
$breadcrumb-active-color: $grey-3;

$card-bg: $grey-1;
$card-border-width: 0;
$card-border-radius: 0;
$card-cap-bg: $grey-1;
$card-cap-padding-y: 1.5rem;
$card-spacer-x: 1.5rem;
$card-spacer-y: 1rem;
$card-group-margin: 1rem;
$card-group-gap: 1rem;

// Lists
$list-item-gutter: 3px;


// Header border
$nav-border-bottom: #ddd;

// Timeline
$timeline-done: var(--ro-timeline-color);
$timeline-background-color: $light-grey;


// RO styling update opt-in styling colors
$feedback-error-bg: #f9dfdd;
$feedback-error-icon: #d52b1e;

$feedback-warning-bg: #fff4dc;
$feedback-warning-icon: #ffb612;

$feedback-success-bg: #e1eddb;
$feedback-success-icon: #39870c;

$feedback-info-bg: #d9ebf7;
$feedback-info-icon: #007bc7;

$checkbox-border-color: #444444;

// User opinion service
$feedback-service-cta-background:  #A90061;

// Tooltip
$tooltip-opacity: 1;

// Backoffice accent colors
$backoffice-yellow: #ffb612;
$backoffice-accent: #a90061;

//Typography
$headings-font-weight: 600;

//Default font-weight bold weight
$font-weight-bold: 600;