@use 'sass:map';

$prefix: 'nsw-';
$enable-important-utilities: true !default;

// Breakpoints
$nsw-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
) !default;

//Breakpoint to switch to desktop view (Layout and Navigation)
$nsw-desktop-breakpoint: lg;

// Font
$nsw-base-font-size: 16px;
$nsw-font-size-reponsive-breakpoint: lg !default;

$nsw-font-weight-lighter: lighter !default;
$nsw-font-weight-light: 300 !default;
$nsw-font-weight-normal: 400 !default;
$nsw-font-weight-medium: 500 !default;
$nsw-font-weight-semibold: 600 !default;
$nsw-font-weight-bold: 700 !default;
$nsw-font-weight-bolder: bolder !default;

// Grid
$grid-gutters: 8px;

// z-index
$nsw-z-index: (
  top: 900,
  upper: 300,
  middle: 200,
  base: 100,
  0:0,
  below: -100,
) !default;

// Base Colours
$nsw-base-colours: (
  brand-dark: var(--nsw-brand-dark),
  brand-light: var(--nsw-brand-light),
  brand-supplementary: var(--nsw-brand-supplementary),
  brand-accent: var(--nsw-brand-accent),
  brand-accent-light: var(--nsw-brand-accent-light),
  black: var(--nsw-black),
  white: var(--nsw-white),
  off-white: var(--nsw-off-white),
  grey-01: var(--nsw-grey-01),
  grey-02: var(--nsw-grey-02),
  grey-03: var(--nsw-grey-03),
  grey-04: var(--nsw-grey-04)
);

$nsw-base-colours-rgb: (
  brand-dark: rgba(var(--nsw-brand-dark-rgb), var(--nsw-bg-opacity, 1)),
  brand-light: rgba(var(--nsw-brand-light-rgb), var(--nsw-bg-opacity, 1)),
  brand-supplementary: rgba(var(--nsw-brand-supplementary-rgb), var(--nsw-bg-opacity, 1)),
  brand-accent: rgba(var(--nsw-brand-accent-rgb), var(--nsw-bg-opacity, 1)),
  brand-accent-light: rgba(var(--nsw-brand-accent-light-rgb), var(--nsw-bg-opacity, 1)),
  black: rgba(var(--nsw-black-rgb), var(--nsw-bg-opacity, 1)),
  white: rgba(var(--nsw-white-rgb), var(--nsw-bg-opacity, 1)),
  off-white: rgba(var(--nsw-off-white-rgb), var(--nsw-bg-opacity, 1)),
  grey-01: rgba(var(--nsw-grey-01-rgb), var(--nsw-bg-opacity, 1)),
  grey-02: rgba(var(--nsw-grey-02-rgb), var(--nsw-bg-opacity, 1)),
  grey-03: rgba(var(--nsw-grey-03-rgb), var(--nsw-bg-opacity, 1)),
  grey-04: rgba(var(--nsw-grey-04-rgb), var(--nsw-bg-opacity, 1))
);

// Background Colours
$nsw-bg-colours: map.merge($nsw-base-colours-rgb, (
  transparent: transparent,
  info-dark: rgba(var(--nsw-status-info-rgb), var(--nsw-bg-opacity, 1)),
  info-light: rgba(var(--nsw-status-info-bg-rgb), var(--nsw-bg-opacity, 1)),
  success-dark: rgba(var(--nsw-status-success-rgb), var(--nsw-bg-opacity, 1)),
  success-light: rgba(var(--nsw-status-success-bg-rgb), var(--nsw-bg-opacity, 1)),
  warning-dark: rgba(var(--nsw-status-warning-rgb), var(--nsw-bg-opacity, 1)),
  warning-light: rgba(var(--nsw-status-warning-bg-rgb), var(--nsw-bg-opacity, 1)),
  error-dark: rgba(var(--nsw-status-error-rgb), var(--nsw-bg-opacity, 1)),
  error-light: rgba(var(--nsw-status-error-bg-rgb), var(--nsw-bg-opacity, 1))
));

// Text Colours
$nsw-text-colours: map.merge($nsw-base-colours, (
  dark: var(--nsw-text-dark),
  light: var(--nsw-text-light),
));

$nsw-border: var(--nsw-border-width) var(--nsw-border-style) var(--nsw-border-color);

$nsw-border-widths: (
  1: var(--nsw-border-width) var(--nsw-border-style) var(--nsw-border-color),
  2: 2px var(--nsw-border-style) var(--nsw-border-color),
  3: 3px var(--nsw-border-style) var(--nsw-border-color),
  4: 4px var(--nsw-border-style) var(--nsw-border-color),
  5: 5px var(--nsw-border-style) var(--nsw-border-color),
  6: 6px var(--nsw-border-style) var(--nsw-border-color)
) !default;

// Box shadow
$nsw-box-shadow: var(--nsw-box-shadow) !default;

// Position
$nsw-position-values: (
  0: 0,
  50: 50%,
  100: 100%
) !default;

// Spaces
$spacers: (
  0: (
    mobile: 0,
    desktop: 0
  ),
  xs: (
    mobile: 4px,
    desktop: 8px
  ),
  sm: (
    mobile: 8px,
    desktop: 16px
  ),
  md: (
    mobile: 16px,
    desktop: 32px
  ),
  lg: (
    mobile: 24px,
    desktop: 48px
  ),
  xl: (
    mobile: 32px,
    desktop: 64px
  ),
  xxl: (
    mobile: 40px,
    desktop: 80px
  )
);

// Width and height
$sizes: (
  4xs: 0.25rem,
  3xs: 0.5rem,
  2xs: 0.75rem,
  xs: 1rem,
  sm: 1.5rem,
  md: 2rem,
  lg: 3rem,
  xl: 4rem,
  2xl: 6rem,
  3xl: 8rem,
  4xl: 16rem,
  0: 0,
  10: 10%,
  20: 20%,
  25: 25%,
  30: 30%,
  33: 33%,
  40: 40%,
  50: 50%,
  60: 60%,
  70: 70%,
  75: 75%,
  80: 80%,
  90: 90%,
  100: 100%
) !default;

// Transitions
$nsw-transition-duration: 0.15s ease-in-out !default;
$nsw-transition-duration-smooth: 0.6s cubic-bezier(0.25, 1, 0.5, 1) !default;
$nsw-transition-duration-a11y: 0.35s cubic-bezier(0.4, 0, 0.2, 1) !default;

// Iconography
$nsw-icon-sizes: (
  20: 20px,
  24: 24px,
  30: 30px,
  36: 36px
);

$nsw-icon-colors: (
  brand: var(--nsw-brand-dark),
  accent: var(--nsw-brand-accent),
  accent-light: var(--nsw-brand-accent-light),
  error: var(--nsw-status-error),
  success: var(--nsw-status-success),
  info: var(--nsw-status-info),
  warning: var(--nsw-status-warning)
);

$nsw-icon-angles: (90, 180, 270);

// Buttons
$nsw-buttons: (
  dark: (
    text-color: var(--nsw-text-light),
    text-color-invert: var(--nsw-section-bg),
    text-color-hover: var(--nsw-text-light),
    text-color-hover-invert: var(--nsw-section-bg),
    background: var(--nsw-brand-dark),
    background-invert: var(--nsw-white),
    background-hover: var(--nsw-brand-dark),
    background-hover-invert: var(--nsw-white),
    border: transparent,
    border-hover: transparent,
    focus: var(--nsw-focus),
    focus-invert: var(--nsw-focus-light),
    hover: white,
    hover-invert: black
  ),
  dark-outline: (
    text-color: var(--nsw-brand-dark),
    text-color-invert: var(--nsw-white),
    text-color-hover: var(--nsw-text-light),
    text-color-hover-invert: var(--nsw-section-bg),
    background: transparent,
    background-invert: transparent,
    background-hover: var(--nsw-brand-dark),
    background-hover-invert: var(--nsw-white),
    border: var(--nsw-brand-dark),
    border-invert: var(--nsw-white),
    border-hover: transparent,
    border-hover-invert: transparent,
    focus: var(--nsw-focus),
    focus-invert: var(--nsw-focus-light),
  ),
  dark-outline-solid: (
    text-color: var(--nsw-brand-dark),
    text-color-invert: var(--nsw-white),
    text-color-hover: var(--nsw-text-light),
    text-color-hover-invert: var(--nsw-section-bg),
    background: var(--nsw-white),
    background-invert: var(--nsw-section-bg),
    background-hover: var(--nsw-brand-dark),
    background-hover-invert: var(--nsw-white),
    border: var(--nsw-brand-dark),
    border-invert: var(--nsw-white),
    border-hover: transparent,
    border-hover-invert: transparent,
    focus: var(--nsw-focus),
    focus-invert: var(--nsw-focus-light)
  ),
  light: (
    text-color: var(--nsw-text-dark),
    text-color-invert: var(--nsw-section-bg),
    text-color-hover: var(--nsw-text-dark),
    text-color-hover-invert: var(--nsw-section-bg),
    background: var(--nsw-brand-light),
    background-invert: var(--nsw-brand-light),
    background-hover: var(--nsw-brand-light),
    background-hover-invert: var(--nsw-brand-light),
    border: transparent,
    border-invert: transparent,
    border-hover: transparent,
    border-hover-invert: transparent,
    focus: var(--nsw-focus),
    focus-invert: var(--nsw-focus-light),
    hover: black,
    hover-invert: white
  ),
  light-outline: (
    text-color: var(--nsw-brand-light),
    text-color-invert: var(--nsw-brand-light),
    text-color-hover: var(--nsw-text-dark),
    text-color-hover-invert: var(--nsw-section-bg),
    background: transparent,
    background-invert: transparent,
    background-hover: var(--nsw-brand-light),
    background-hover-invert: var(--nsw-brand-light),
    border: var(--nsw-brand-light),
    border-invert: var(--nsw-brand-light),
    border-hover: transparent,
    border-hover-invert: transparent,
    focus: var(--nsw-focus),
    focus-invert: var(--nsw-focus-light)
  ),
  white: (
    text-color: var(--nsw-text-dark),
    text-color-invert: var(--nsw-section-bg),
    text-color-hover: var(--nsw-text-dark),
    text-color-hover-invert: var(--nsw-section-bg),
    background: var(--nsw-white),
    background-invert: var(--nsw-white),
    background-hover: var(--nsw-white),
    background-hover-invert: var(--nsw-white),
    border: transparent,
    border-invert: transparent,
    border-hover: transparent,
    border-hover-invert: transparent,
    focus: var(--nsw-white),
    focus-invert: var(--nsw-focus-light),
    hover: black,
    hover-invert: black
  ),
  white-outline: (
    text-color: var(--nsw-white),
    text-color-invert: var(--nsw-white),
    text-color-hover: var(--nsw-text-dark),
    text-color-hover-invert: var(--nsw-section-bg),
    background: transparent,
    background-invert: transparent,
    background-hover: var(--nsw-white),
    background-hover-invert: var(--nsw-white),
    border: var(--nsw-white),
    border-invert: var(--nsw-white),
    border-hover: transparent,
    border-hover-invert: transparent,
    focus: var(--nsw-white),
    focus-invert: var(--nsw-focus-light),
    hover: black,
    hover-invert: white
  ),
  danger: (
    text-color: var(--nsw-text-light),
    text-color-invert: var(--nsw-text-light),
    text-color-hover: var(--nsw-text-light),
    text-color-hover-invert: var(--nsw-text-light),
    background: var(--nsw-status-error),
    background-invert: var(--nsw-status-error),
    background-hover: var(--nsw-status-error),
    background-hover-invert: var(--nsw-status-error),
    border: transparent,
    border-invert: transparent,
    border-hover: transparent,
    border-hover-invert: transparent,
    focus: var(--nsw-focus),
    focus-invert: var(--nsw-focus-light),
    hover: white,
    hover-invert: white
  ),
  info: (
    text-color: var(--nsw-text-light),
    text-color-hover: var(--nsw-text-light),
    background: var(--nsw-status-info),
    background-hover: var(--nsw-status-info),
    border: transparent,
    border-hover: transparent,
    focus: var(--nsw-focus),
    focus-invert: var(--nsw-focus-light),
    hover: white
  ),  
);

// Forms
$nsw-form-tick: '<svg fill="#ffffff" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M29.362 3.742l-18.867 19.204-7.857-7.997-2.638 2.685 9.175 9.34 1.319 1.284 1.318-1.284 20.187-20.547z"></path></svg>';
$nsw-form-chevron-down: '<svg fill="#333333" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M16 26l16-16-4-4-12 12-12-12-4 4 16 16z"></path></svg>';
$nsw-quick-exit-shield: '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M480-320q102-92 131-129.5t29-74.5q0-36-26-62t-62-26q-21 0-40.5 8.5T480-580q-12-15-31-23.5t-41-8.5q-36 0-62 26t-26 62q0 19 5 35t22 37.5q17 21.5 48.5 52.5t84.5 79Zm0 240q-139-35-229.5-159.5T160-516v-244l320-120 320 120v244q0 152-90.5 276.5T480-80Zm0-84q104-33 172-132t68-220v-189l-240-90-240 90v189q0 121 68 220t172 132Zm0-316Z"/></svg>';

// In-page alerts
$nsw-in-page-alerts: (
  info: (
    border: var(--nsw-status-info),
    background: var(--nsw-status-info-bg),
    fill: var(--nsw-status-info),
  ),
  success: (
    border: var(--nsw-status-success),
    background: var(--nsw-status-success-bg),
    fill: var(--nsw-status-success),
  ),
  warning: (
    border: var(--nsw-status-warning),
    background: var(--nsw-status-warning-bg),
    fill: var(--nsw-status-warning),
  ),
  error: (
    border: var(--nsw-status-error),
    background: var(--nsw-status-error-bg),
    fill: var(--nsw-status-error),
  ),
);

// Status labels
$nsw-status-labels: ( info, success, warning, error );

// Table styles
$nsw-vertical-align: (
  valign-baseline: baseline,
  valign-top: top,
  valign-middle: middle,
  valign-bottom: bottom,
);