@import "./rbc-global-color.scss";
@import "./rbc-global-mixins.scss";
@import "./rbc-global-font.scss";
@import "./rbc-global-functions.scss";

//*************** UI & LAYOUT *********************************/

$margin-2: 0.13em;
$margin-4: 0.25em;
$margin-small: 8px;
$margin-8: 0.5em;
$margin-10: 10px;
$margin-12: 0.75em;
$margin-medium: 20px;
$margin-24: 1.5em;
$margin-28: 1.75em;
$margin-32: 2em;
$margin-large: 32px;
$margin-xl: 40px;

// Padding Sizes
$padding-xs: 5px;
$padding-4: 0.25em;
$padding-8: 0.5em;
$padding-sm: 10px;
$padding-12: 12px;
$padding-md: 15px;
$padding-16: 1em; // ems scale on the font-size set on the nearest parent, 1 em/rem = 16px at default font-size settings
$padding-lg: 20px;
$padding-24: 24px;
$padding-xl: 30px;
$padding-28: 1.75em;
$padding-32: 2em;
$padding-40: 2.5em; // 40px
$padding-48: 3.00em;
$padding-62: 3.88em;

$analyze-page-item-height: 42px;
$modal-z-index: 10001;

//*************** UI & LAYOUT - SCREEN SIZES *********************************/

$screen-size-xxs : 375px;
$screen-size-xs : 575px;
$screen-size-sm : 767px;
$screen-size-md : 991px;
$screen-size-lg : 1183px;
$screen-size-xl : 1383px;
$screen-size-xxl : 1919px;

//*************** UI & LAYOUT - MOBILE *********************************/

$mobile-result-container-height: 44px;
$mobile-result-container-max-height: 132px;

//******************************* All Links **********************/
$text-link: #002888; // - Link

// - Negative/Positive Values
$text-neg: #B91A0E; // - Negative
$text-pos: #097B24; // - Positive

// - Panel Colors
$text-panel-sub-header: #365D84; // - Panel Sub-Header

// - Main Text Colors
$text-header: #5E7487; // - Header
$text-black: #000000; // - Black(Body Copy)
$text-black-secondary: #333333; // - Black Secondary
$text-black-tertiary: #666666; // - Black Tertiary

// - Text State Colors
$text-disabled: #444; //- Disabled

//***************************** INTERFACE-SPECIFIC COLORS **************/
// - Primary Brand Colors
$brand-blue: #002888; // - RBC Blue

// - Negative / Positive Elements
$change-negative: #9C0000; // - Change Negative
$change-positive: #005A00; // - Change Positive

// - Buttons
$btn-prime: #002888; // - Button Prime
$btn-prime-hover: #0051A5; // - Button Prime Hover
$btn-prime-border: #002888; // - Button Prime Border
$btn-disabled: #EAEAEA; // - Disabled Button Fill
$btn-disabled-border: #B3B3B3; // - Disabled Button Stroke
$btn-focus-border: #2C9CDD; // - Focus Border
$btn-focus-shadow: #0597FF; // - Focus Shadow

// - Main Table Colors
$table-border: #7E94C2; // - Border
$table-options-expanded-border: #00177E;

// - Practice Account Table
$table-practice: #F4F1E5; // - Practice Primary Stripe
$table-practice-alt: #E2DFCF; // - Practice Alternating Stripe

// - Dropdown
$dropdown-line-breaks: #999999; // - Line Breaks

// - Unfilled progress bar
$RBC_LightGrey: #D2DADE;

// - Confirmation
$confirmation-pos-border: #005A00; // - Positive Border
$confirmation-neg-border: #9C0000; // - Negative Border

$chart-ext-carbon: #50585F; // - Ext Carbon
$chart-reverse-sun: #FCA311; // - Reverse Sun

/******************** MD Research ************************/

$technicals_bullish_event: #005a00;
$RBC_DarkGrey: #999;
$technicals_bearish_event: #b91a0e;

// - TECHNICALS ICONS


$technicals_other_event: #50585f;
$technicals_table_row: #f7f9fa;

/************************************** P & CB Colour ****************************/

// - BRANDS
$interactive-1: $rbc-blue-tint-1;
$interactive-1-hover: $rbc-blue;
$interactive-1-active: $dark-blue-tint-1;
$interactive-1-text: $white;
$interactive-accent: $rbc-yellow;
$interactive-accent-hover: $dark-yellow-tint-1;
$interactive-accent-active: $dark-yellow;
$interactive-accent-text: $black-tint-1;
$interactive-opposite: $rbc-yellow;
$interactive-opposite-hover: $dark-yellow-tint-1;
$interactive-opposite-active: $dark-yellow;
$interactive-opposite-text: $black-tint-1;
$link: $rbc-blue-tint-1;
$link-hover: $rbc-blue;
$link-active: $dark-blue-tint-1;
$link-opposite: $white;
$link-opposite-hover: $white;
$link-opposite-active: $white;

// - TEXT & FOREGROUND
$text-default: $black-tint-1;
$text-low-emphasis: $grey-tint-1;
$text-disabled: $grey-tint-2;
$text-opposite-1: $white;
$text-opposite-2: $white;

// - BACKGROUNDS
$background-1: $white;
$background-2: $grey-light-tint-1;
$background-3: $grey-light-tint-2;
$background-highlight: $tundra-tint-3;
$background-opposite-1: $rbc-blue-tint-1;
$background-overlay: $black-tint-1;
$background-overlay-inline: $white;
$background-page: $white;
$background-disabled: $grey-light-tint-3;

// - BORDERS
$border_width_1: 1px;
$border_width_2: 2px;
$border_width_3: 3px;

$rounded-circle-1: 1px solid #6F6F6F;
$rounded-circle-2: 2px solid #6F6F6F;
$rounded-circle-3: 3px solid #6F6F6F;
$rounded-circle-4: 4px solid #6F6F6F;

$border-radius-1: 1px;
$border-radius-2: 2px;
$border-radius-3: 3px;
$border-radius-4: 4px;
$border-radius-8: 8px;
$border-radius-12: 12px;
$border-radius-16: 16px;
$border-radius-20: 20px;
$border-radius-24: 24px;
$border-radius-32: 32px;

$border-1: $grey-tint-1;
$border-2: $black-tint-1;
$border-3: $grey-tint-3;
$border-4: $grey-light-tint-4;
$border-opposite-1: $white;
$border-1-grey-light-tint: 1px solid $grey-light-tint-4;

$border-selected: 0.125rem solid $rbc-blue-tint-1;
$border-focus-visible: 0.125rem solid $rbc-blue-tint-1;

// - BOX SHADOWS
$modal-box-shadow: 0px 3.59106px 7.84712px rgba(37, 37, 37, 0.12);
$divider-box-shadow: 0.125rem 0px 0.25rem 0px rgba(0, 0, 0, 0.20);
$dropdown-box-shadow: 0px 3.591px 7.847px 0px rgba(37, 37, 37, 0.08), 0px 12.062px 26.357px 0px rgba(37, 37, 37, 0.06), 0px 50.25rem 110.5rem 0px rgba(37, 37, 37, 0.04);

$component-bg-1: $white;
$component-bg-2: $sky-tint-3;
$component-bg-3: $tundra-tint-2;
$component-bg-opposite-1: $white; //transparent

// - SELECTED STATES
$selected-1: $rbc-blue-tint-1;
$selected-2: $rbc-blue-tint-4;
$selected-opposite-1: $white;

// - ACTION STATES
$action-success : $alert-success;
$action-error: $alert-error;
$action-warning: $alert-warning;
$action-information :$alert-info;
$action-neutral: $grey-light-tint-4;

// - AVATARS
$avatar-1: $dark-blue;
$avatar-2: $ocean;
$avatar-3: $warm-yellow;
$avatar-4: $sun;
$avatar-5: $beige;
$avatar-6: $seaweed;
$avatar-8: $warm-grey;

/*
Based on the design: the breakpoints are device breakpoints instead of page breakpoints
To get real page breakpoints we use device breakpoints (from the design) - margins
*/
// TODO: this is a placeholder and it will be adjusted based on the design.
$grid-breakpoints: (
    xxs: 0,
    xs: 377px,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1184px,
    xxl: 1384px
);

$grid-gap-sm: 1em;
$grid-gap: 3em; // 48px