/*
*    Bootstrap attributes from defaults in bootstrap.scss
*/

@import "~@netapp/luci/tokens/tokens";
@import "lucix-tokens";
@import "~sass-rem/rem";

/* shim the 2.6 */
$luci-brand-color: #0067C5;
$luci-color-blue-28: #173E77;
$luci-color-blue-65: #4FAAFF;
$luci-color-green-35: #7E9C18;
$luci-color-green-50: #6FC13E;

$body-color: $luci-text-color-primary-on-light !default;
$body-bg: $luci-background-color-light !default;

//  need transitions off to stop slow feeling 
$enable-transitions: false;

$font-family-base: $luci-font-family-sans-serif;
$text-color: $body-color !default;
$link-color: $luci-link-color-default-on-light;
/* Bootstrap is using rem instead of px */
/* We assume 16px is browser's default font size */
$font-size-base:          1rem !default;
$h1-font-size:            rem($luci-font-size-h3-lg) !default;
$h2-font-size:            rem($luci-font-size-h4-lg) !default;
$h3-font-size:            rem($luci-font-size-h5-lg) !default;
$h4-font-size:            rem($luci-font-size-h6-lg) !default;
$h5-font-size:            rem($luci-font-size-h6-lg) !default;
$h6-font-size:            rem($luci-font-size-h6-lg) !default;

$font-size-lg:            rem($luci-font-size-md);
$font-size-sm:            rem($luci-font-size-xs);
$font-size-xs:            rem($luci-font-size-xs);

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1900px,
  xxxl: 3800px
) !default;

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1800px,
  xxxl: 3600px
) !default;

/* COLORS */

$blue: $luci-brand-color;
$white: $luci-color-white;

/* NetApp Luci pallete */

/* Grays */
$gray-100: $luci-background-color-light;
$gray-200: $luci-color-neutral-85;
$gray-300: $luci-color-neutral-84;
$gray-400: $luci-color-neutral-76;
$gray-500: $luci-color-neutral-61;
$gray-600: $luci-color-neutral-53;
$gray-700: $luci-color-neutral-34;
$gray-800: $luci-color-neutral-27;
$gray-900: $luci-color-neutral-15;
$gray-950: $luci-color-neutral-7;

/* Blues */
$blue-100: $luci-color-blue-77;
$blue-200: $luci-color-blue-65;
$blue-300: $blue;
$blue-400: $luci-color-blue-35;
$blue-500: $luci-color-blue-28;
$blue-600: $luci-color-blue-28;

/* Accents */
$green-100: $luci-color-green-51;
$green-200: #94c000;
$green-300: $luci-color-green-35;
$green-400: #50630e;
$purple-100: #e8e2f9;
$purple-200: #bfabf6;
$purple-300: #9f82f1;
$purple-400: #7e5fd4;
$purple-500: #584198;

/* Warnings */
$orange-100: $luci-color-orange-82;
$orange-200: $luci-color-orange-50;
$orange-300: $luci-color-orange-49;
$yellow-100: #fedf16;
$yellow-200: #efd110;

/* Error */
$red-100: $luci-color-red-90;
$red-200: $luci-color-red-64;
$red-300: $luci-color-red-49;

/* Success */
$green-100: $luci-color-green-75;
$green-200: $luci-color-green-50;
$green-300: $luci-color-green-35;

//  need transitions off to stop slow feeling
$enable-transitions: false;

/* Theme colors for bs overrides */
$primary: $blue;
$secondary: $gray-300;
$success: $luci-feedback-color-success-background;
$info: $luci-background-color-lightest-blue;
$warning: $luci-feedback-color-warning-background;
$error: $luci-feedback-color-error-background;
$critical: $luci-feedback-color-error-background;
$light: $gray-200;
$dark: $gray-800;

$theme-colors: (
    "ok": $success,
    "error":  $error,
    "critical": $critical
);

$ntap-status-critical: #da1e21;
$ntap-status-error: #f88400;
$ntap-status-warning: #ffac00;
$ntap-icon-colors: (
  "critical": $ntap-status-critical,
  "error": $ntap-status-error,
  "warning": $ntap-status-warning,
);

$text-muted: $luci-text-color-secondary-on-light;

/* Round */
$border-radius: $luci-border-radius-default;
$border-radius-sm: $border-radius;
$border-radius-lg: $border-radius;

/* Buttons */

$btn-primary-bg:  $luci-interactive-color-default;

$btn-font-weight: $luci-font-weight-semi-bold !default;
$btn-padding-x: rem($luci-space-xl) !default;
$btn-padding-y: 0 !default;
$btn-font-size: rem($luci-font-size-md) !default;

$btn-padding-x-sm: rem($luci-space-inset-sm);
$btn-padding-y-sm: 0;
$btn-font-size-sm:  rem($luci-font-size-sm);
$btn-line-height-sm: 0.9;

$btn-padding-x-lg: $luci-space-md;
$btn-padding-y-lg: $luci-space-sm;

$btn-disabled-opacity: 1;
$btn-box-shadow: 0 0 0 2px $luci-interactive-color-focus;
$btn-line-height: 1.25;
$btn-border-width: 2px !default;

$close-color: $luci-icon-color-default;
$close-text-shadow: none;
$close-font-size: rem(24px);
$close-font-weight: normal;

/* Dropdown */
$dropdown-padding-y: 0;
$dropdown-font-size: $luci-font-size-md;
$dropdown-link-color: $luci-link-color-default-on-light;
$dropdown-link-hover-color: $luci-link-color-hover-on-light;
$dropdown-link-active-color: $luci-text-color-primary-on-dark;
$dropdown-spacer: 0;
$dropdown-link-hover-bg: transparent;
$dropdown-link-active-bg: $luci-interactive-color-active;
$dropdown-bg: $luci-background-color-light;
$dropdown-border-color: $luci-border-component-on-light-color;
$dropdown-box-shadow: $luci-box-shadow-hard-on-light;
$dropdown-border-radius: 0px;
$dropdown-header-color: $luci-text-color-selected-on-light;
$dropdown-item-padding-y: $luci-space-xs;
$dropdown-item-padding-x: $luci-space-sm;

/* Alert */
$alert-padding-y: rem($luci-space-inset-xs);
$alert-padding-x: rem($luci-space-inset-sm);
$alert-bg-level: 0;
$alert-border-level: 0;
$alert-color-level: 0;
$alert-color-theme: (
  "info": (
    border: $luci-background-color-light-blue,
    icon: $luci-interactive-color-default,
  ),
  "success": (
    border: $luci-feedback-color-success-chart,
    icon: $luci-feedback-color-success-primary,
  ),
  "warning": (
    border: $luci-feedback-color-warning-chart,
    icon: $luci-feedback-color-warning-primary,
  ),
  "error": (
    border: $luci-feedback-color-error-chart,
    icon: $luci-feedback-color-error-primary,
  ),
  "critical": (
    border: $luci-feedback-color-error-chart,
    icon: $luci-feedback-color-error-primary,
  )
);

/* Toasts */
$toast-max-width: 390px;
$toast-font-size: $luci-font-size-sm;
$toast-color: $luci-color-neutral-15;
$toast-background-color: $luci-background-color-lightest-blue;
$toast-border-width: 0;
$toast-border-color: transparent;
$toast-box-shadow: 0 6px 10px 0 rgba($luci-color-black, 0.2);
$toast-border-radius: 0;
$toast-padding-x: 0;
$toast-padding-y: 0;
$toast-header-color: $luci-color-neutral-15;
$toast-header-background-color: transparent;
$toast-header-border-color: transparent;

/* Buttons + Form */
$custom-switch-indicator-border-radius: 0.75rem;
$enable-caret: false;

$label-margin-bottom: 0;
$custom-forms-transition: none;
$custom-select-bg-size: 26px;
$custom-select-padding-x: .30rem; //spaces the arrow dropdown icon properly
/* Indicator primary and secondary are my own notions, so I Can have two different colors in different buttons */
$custom-select-indicator-primary: str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$luci-interactive-color-default}' viewBox='0 0 24 24'%3E%3Cpath d='M16.6 8.6L12 13.2 7.4 8.6 6 10l6 6 6-6-1.4-1.4z'/%3E%3C/svg%3E"), "#", "%23");
$custom-select-indicator-secondary: str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$white}' viewBox='0 0 24 24'%3E%3Cpath d='M16.6 8.6L12 13.2 7.4 8.6 6 10l6 6 6-6-1.4-1.4z'/%3E%3C/svg%3E"), "#", "%23");
$custom-select-indicator-disabled: str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$luci-color-neutral-61}' viewBox='0 0 24 24'%3E%3Cpath d='M16.6 8.6L12 13.2 7.4 8.6 6 10l6 6 6-6-1.4-1.4z'/%3E%3C/svg%3E"), "#", "%23");
$custom-select-indicator: $custom-select-indicator-primary;
$custom-select-indicator-padding: 1.5rem;
$custom-select-padding-x: .75rem;
$custom-control-indicator-checked-bg: $blue;
$custom-control-indicator-bg: white;
$custom-checkbox-indicator-icon-checked: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E %3Cpolygon fill='%23FFF' points='5.175 9.941 2.332 7.098 1.364 8.059 5.175 11.87 13.357 3.689 12.395 2.727'/%3E %3C/svg%3E ");
$custom-radio-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-indicator-checked-bg}'/%3E%3C/svg%3E"), "#", "%23");
$custom-control-indicator-bg-size: 80% 80%;
$input-color: $luci-text-color-primary-on-light;
$input-border-color: $luci-border-separator-on-light-color;
$input-disabled-bg: $luci-background-color-light;
$input-transition: none;
$input-focus-bg: #E1F1FF;
$input-focus-box-shadow: 0 0 0 2px #6C9CEF;
$input-btn-padding-y:  rem($luci-space-xs);
$input-btn-padding-x:  rem($luci-space-sm);
$input-focus-border-color: $luci-interactive-color-focus;
$input-focus-bg: $luci-background-color-lightest-blue;

$input-font-size-sm: $btn-font-size-sm;
$input-height-sm: 30px; //Same as button height in _buttons for btn-sm

$form-feedback-valid-color: $blue;
$form-feedback-tooltip-font-size: $btn-font-size-sm;
$form-feedback-tooltip-padding-x: rem($luci-space-xxs);
$form-feedback-tooltip-padding-y: rem($luci-space-xxs);

$form-check-input-gutter: 0;

/* Progress Bar */
$progress-height: 12px;


/* Card */
$card-columns-margin: $luci-space-lg;
$card-spacer-x: $luci-space-inset-lg;
$card-spacer-y: $luci-space-inset-md;
$card-cap-bg: transparent;
$card-border-color: $luci-border-component-on-light-color;
$card-inner-border-radius: 0;
$card-columns-gap: $luci-space-lg;
$card-deck-margin: $luci-space-sm;

/* Tabs */
$nav-tabs-border-color: $luci-border-component-on-light-color;
$nav-tabs-link-active-bg: $luci-background-color-white;
$nav-tabs-link-active-color: $lucix-interactive-color-active;
$nav-tabs-link-hover-border-color: $luci-color-neutral-84;
$nav-link-padding-x: rem($luci-space-inset-xl);
$nav-link-padding-y: rem($luci-space-inset-sm);

/* Popover */
$popover-header-bg: $white;
$popover-body-padding-x: $luci-font-size-lg;
$popover-body-padding-y: $luci-font-size-lg;
$popover-font-size: $font-size-base;
$popover-header-padding-x: $luci-font-size-lg;
$popover-header-padding-y: $luci-font-size-lg;
$popover-max-width: 420px;
$popover-font-size: $luci-font-size-sm;
$popover-border-color: $luci-border-component-on-light-color;
$popover-arrow-outer-color: $luci-border-component-on-light-color;

/* Tooltip */
$tooltip-bg: $luci-background-color-dark;
$tooltip-arrow-color: $luci-background-color-dark;
$tooltip-opacity: 1;
$tooltip-color: $luci-text-color-primary-on-dark;
$tooltip-padding-x: $luci-space-sm;
$tooltip-padding-y: $luci-space-xs;
$tooltip-font-size: $luci-font-size-sm;


/* other */


/* Tables */
$table-hover-bg: $luci-background-color-light;
$table-bg: white;
$table-border-width: 1px;
$table-border-color: $luci-border-component-on-light-color;
$table-cell-padding: $luci-space-inset-sm - 2px;

/* Modal */
$modal-title-line-height: $luci-font-line-height-heading;
$modal-header-padding: rem($luci-space-inset-lg);
$modal-inner-padding: rem($luci-space-inset-lg);
$modal-content-border-radius: $luci-border-radius-default;
$modal-header-border-color: transparent;
$modal-header-border-width: 0;
$modal-footer-border-color: transparent;
$modal-footer-border-width: 0;
$modal-backdrop-bg: $luci-color-neutral-7;
$modal-backdrop-opacity: 0.4;