@use 'sass:map';

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

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

// Reflow threshold for the WCAG benchmark. Keep separate from the public breakpoint scale.
$nsw-reflow-threshold: 320px !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>' !default;
$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>' !default;
$nsw-quick-exit-icon: '<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.69695 4.04314L14.2954 0.0608407C14.9923 -0.188053 15.739 0.359513 15.739 1.10619V4.19248H26.989C27.4868 4.19248 27.885 4.59071 27.885 5.0885V8.57301C27.2379 8.67257 26.6405 8.8219 26.0432 9.12057V6.03429H15.7888V41.2777H22.6085L22.5089 41.7257C22.4093 42.1737 22.3596 42.6715 22.4093 43.1195H15.7888V46.2058C15.7888 46.9524 15.0421 47.5 14.3452 47.2511L2.74673 43.2688C2.29873 43.1195 2.00005 42.7212 2.00005 42.2235V5.0885C2.00005 4.64049 2.29872 4.24226 2.69695 4.04314ZM11.5078 25.0498C12.1051 25.0498 12.6029 24.4524 12.6029 23.656C12.6029 22.9093 12.1051 22.2622 11.5078 22.2622C10.9105 22.2622 10.3629 22.8595 10.3629 23.656C10.4127 24.4027 10.9105 25.0498 11.5078 25.0498Z" fill="white"/><path d="M38.2389 32.1681L39.0852 35.3539H44.8097C46.0044 35.3539 47 36.3495 47 37.5442C47 38.7389 46.0044 39.7345 44.8097 39.7345H37.4425C36.4469 39.7345 35.6007 39.0873 35.302 38.1415L34.5055 35.1548L38.1394 32.2179C38.1892 32.2179 38.1892 32.2179 38.2389 32.1681Z" fill="white"/><path d="M27.7854 18.4291C25.6947 17.9313 24.4502 15.8904 24.8983 13.7997C25.396 11.709 27.437 10.4645 29.5277 10.9125C31.6184 11.4103 32.8629 13.4513 32.4149 15.542C31.9668 17.6327 29.8761 18.9269 27.7854 18.4291Z" fill="white"/><path d="M26.5408 34.8562C26.6404 34.4082 26.9391 33.9601 27.2875 33.6615L31.22 30.4756L29.1293 24.9502L27.0386 27.3894C26.6902 27.7876 26.1426 28.0365 25.6448 28.0365C25.2964 28.0365 24.9977 27.9369 24.699 27.7876L20.9656 25.5475C20.1194 25.0497 19.8207 23.9048 20.3185 23.0088C20.8163 22.1626 21.9612 21.8639 22.8572 22.3617L25.2466 23.8053L27.2377 21.5155C27.7853 20.9181 28.4324 20.4203 29.2289 20.1217L32.5143 18.927C33.5098 18.5785 34.5552 18.5287 35.5508 18.8772L39.9313 20.271C40.4291 20.4203 40.8273 20.7688 41.0264 21.2666L42.8683 25.3484C43.2665 26.2942 42.8683 27.3396 41.9225 27.7876C40.9767 28.1858 39.9313 27.7876 39.4833 26.8418L37.9899 23.5066L35.949 22.8595L37.6415 29.2809C37.8406 30.1272 37.5917 31.0232 36.8948 31.521L30.6227 36.5984L28.98 43.3683C28.7311 44.3639 27.8351 45.011 26.8395 45.011C26.6404 45.011 26.491 45.011 26.2919 44.9613C25.0972 44.6626 24.4003 43.4679 24.699 42.2732L26.5408 34.8562Z" fill="white"/></svg>' !default;
$nsw-quick-exit-shield: $nsw-quick-exit-icon !default;

// 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,
);

// Easy Read
$nsw-easy-read-icon: "data:image/svg+xml,%3Csvg width='90' height='83' viewBox='0 0 90 83' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M84.8978 7.6886H88.0476V62.6834H1.95312V7.6886H11.3185' stroke='%23002664' stroke-width='2.3' stroke-linejoin='round'/%3E%3Cpath d='M72.2975 23.437H51.2988' stroke='%23002664' stroke-width='2.3' stroke-linejoin='round'/%3E%3Cpath d='M72.2955 15.1467H51.2969' stroke='%23002664' stroke-width='2.3' stroke-linejoin='round'/%3E%3Cpath d='M72.2975 31.8375H51.2988' stroke='%23002664' stroke-width='2.3' stroke-linejoin='round'/%3E%3Cpath d='M72.2975 40.2363H51.2988' stroke='%23002664' stroke-width='2.3' stroke-linejoin='round'/%3E%3Cpath d='M45 62.5997V5.98801C45 3.67818 46.8899 1.78833 49.1997 1.78833H81.7476V54.2843H49.1997C46.8689 54.2843 45 56.1742 45 58.484V62.5997Z' stroke='%23002664' stroke-width='2.3' stroke-linejoin='round'/%3E%3Cpath d='M44.9996 62.5997V5.98801C44.9996 3.67818 43.1097 1.78833 40.7999 1.78833H22.783V16.5712L8.25195 16.6762V54.3053H40.7999C43.1307 54.3053 44.9996 56.1952 44.9996 58.505V62.6207V62.5997Z' stroke='%23002664' stroke-width='2.3' stroke-linejoin='round'/%3E%3Cpath d='M22.783 1.74609L8.25195 16.655' stroke='%23002664' stroke-width='2.3' stroke-linejoin='round'/%3E%3Cpath d='M0.839844 70.2229H8.48335V71.7558H2.58273V75.3465H7.83239V76.8374H2.58273V80.5121H8.63034V82.066H0.839844V70.2229Z' fill='%23002664'/%3E%3Cpath d='M14.4048 70.2229H16.3367L20.5994 82.066H18.8355L17.7226 78.9582H13.0189L11.906 82.066H10.1211L14.4048 70.2229ZM17.2606 77.3834L15.3498 71.9448L13.4389 77.3834H17.2396H17.2606Z' fill='%23002664'/%3E%3Cpath d='M24.4217 81.8563C23.7287 81.6043 23.1618 81.2263 22.6998 80.7014C22.2378 80.1974 21.9649 79.5674 21.8809 78.8535H23.7077C23.8547 79.4625 24.1697 79.9454 24.6947 80.2814C25.2196 80.6174 25.8496 80.7854 26.5846 80.7854C27.1095 80.7854 27.5715 80.7224 27.9915 80.5754C28.4114 80.4284 28.7474 80.2184 28.9784 79.9454C29.2304 79.6724 29.3354 79.3365 29.3354 78.9795C29.3354 78.4965 29.1674 78.0976 28.8104 77.7826C28.4534 77.4676 27.9495 77.2576 27.2985 77.1106L25.0517 76.6067C24.1487 76.4177 23.4558 76.0607 22.9518 75.5568C22.4478 75.0318 22.2168 74.3598 22.2168 73.5409C22.2168 72.848 22.4058 72.26 22.7838 71.735C23.1618 71.2101 23.6657 70.7901 24.3167 70.5171C24.9677 70.2232 25.7026 70.0762 26.5426 70.0762C27.4665 70.0762 28.2854 70.2232 28.9364 70.5381C29.6084 70.8531 30.1123 71.2731 30.4483 71.798C30.7843 72.323 30.9733 72.911 30.9733 73.5409H29.1884C29.1254 72.827 28.8524 72.323 28.3694 71.987C27.9075 71.672 27.2985 71.5041 26.5426 71.5041C26.1016 71.5041 25.6816 71.5881 25.3036 71.735C24.9257 71.882 24.6317 72.092 24.4007 72.386C24.1697 72.659 24.0647 72.995 24.0647 73.3939C24.0647 73.6669 24.1277 73.9189 24.2327 74.1079C24.3377 74.2969 24.5477 74.4858 24.8207 74.6328C25.0937 74.7798 25.4716 74.9058 25.9756 75.0318L28.1805 75.5358C29.3144 75.7667 30.0703 76.2077 30.5113 76.8377C30.9313 77.4676 31.1413 78.1816 31.1413 78.9795C31.1413 79.5884 30.9523 80.1554 30.5953 80.6384C30.2173 81.1423 29.6924 81.5203 29.0204 81.8143C28.3274 82.1083 27.5295 82.2552 26.6056 82.2552C25.8286 82.2552 25.0937 82.1293 24.4217 81.8773V81.8563Z' fill='%23002664'/%3E%3Cpath d='M37.6081 77.0475V82.0661H35.8652V77.0265L31.8125 70.202H33.7234L36.7472 75.4726L39.729 70.202H41.6399L37.6081 77.0265V77.0475Z' fill='%23002664'/%3E%3Cpath d='M53.7972 82.0659L51.6974 77.1103H48.7155V82.0659H46.9727V70.2228H51.6764C52.9573 70.2228 53.9442 70.5168 54.5952 71.1047C55.2461 71.6927 55.5821 72.5116 55.5821 73.5405C55.5821 75.1154 54.8261 76.2073 53.3352 76.8163L55.6241 82.0659H53.7762H53.7972ZM51.1934 75.6824C52.0123 75.6824 52.6633 75.5144 53.1043 75.1364C53.5452 74.7584 53.7762 74.2755 53.7762 73.6035C53.7762 72.9316 53.5662 72.4696 53.1673 72.1126C52.7683 71.7767 52.2013 71.5877 51.4874 71.5877H48.7155V75.6614H51.1934V75.6824Z' fill='%23002664'/%3E%3Cpath d='M58.1445 70.2227H65.788V71.7555H59.8874V75.3463H65.1371V76.8372H59.8874V80.5119H65.935V82.0657H58.1445V70.2227Z' fill='%23002664'/%3E%3Cpath d='M71.7095 70.2228H73.6414L77.9041 82.0659H76.1402L75.0273 78.9581H70.3236L69.2107 82.0659H67.4258L71.7095 70.2228ZM74.5653 77.3832L72.6544 71.9446L70.7436 77.3832H74.5443H74.5653Z' fill='%23002664'/%3E%3Cpath d='M82.9867 70.2438C85.1076 70.2858 86.6615 70.7897 87.6694 71.7767C88.6773 72.7636 89.1603 74.1915 89.1603 76.0813C89.1603 77.9712 88.6353 79.5251 87.6064 80.533C86.5565 81.5409 84.9816 82.0659 82.8817 82.0659H80.0469V70.2228C81.3488 70.2228 82.3567 70.2228 83.0077 70.2228L82.9867 70.2438ZM82.8817 80.596C84.2886 80.596 85.3805 80.239 86.1575 79.5251C86.9344 78.8111 87.3124 77.6772 87.3124 76.0813C87.3124 74.4855 86.9344 73.3935 86.1995 72.7216C85.4645 72.0496 84.3726 71.6927 82.9237 71.6927H81.8108V80.596H82.8817Z' fill='%23002664'/%3E%3Cpath d='M37.0104 23.4374H16.0117V40.2361H37.0104V23.4374Z' stroke='%23002664' stroke-width='2.3' stroke-linejoin='round'/%3E%3C/svg%3E%0A";