@use '@mskcc/colors' as c;
@use '@mskcc/themes/tokens' as tk;
@import './variables/elevations.scss';

// ------------------
// use prefix $msk-- for variable prefixes
// ------------------

// unique variable for gulp usage only
$fundamentals-env: 'development' !default;

$slicer-breakpoints: 100px 200px 320px 400px 500px 600px 700px 800px 900px
    1024px 1100px 1200px 1300px 1440px 1448px 1478px 1496px 1536px 1600px 1700px
    1800px 1900px 2000px;

// This is the path needed for scss to find the fonts.
$msk--font-path: '~@mskcc/fundamentals/src/typography/assets/' !default;

// This is the path needed for css to find the fonts. This is only effected in css compiling.
@if ($fundamentals-env == 'production') {
    $msk--font-path: '../src/typography/assets/';
}

$msk--global-font-family: 'gotham', 'Helvetica Neue', Helvetica, Arial,
    sans-serif !default;
$msk--monospace-font-family: 'redhat-mono', 'Menlo', Courier, monospace !default;
$msk--max-width-chars: 72ch !default;
$msk--global-line-height: 1.7 !default;

// disable carbon resets by default
$css--reset: false !default;
// disable carbon type by default
$css--default-type: false !default;
$css--font-face: false !default;
$css--helpers: false;
$css--body: false;
$css--use-layer: false;
$css--typography: false;
$css--plex: false;
$shell-header-bg-01: #fff;
$shell-header-text-02: #161616;
$body-short-01: ();
$feature-flags: (
    grid-columns-16: true,
);

$button-font-size: 16px;
$button-border-radius: 4px;
$button-font-weight: 500;
$button-outline-width: 1px;
$button-border-width: 0; //TODO

$button-padding: 12px 16px;
$button-padding-field: 8px 16px;
$button-padding-sm: 4px 16px;

$button-padding-ghost: $button-padding;
$button-padding-ghost-field: $button-padding-field;
$button-padding-ghost-sm: $button-padding-sm;

$msk--button-icon-size: 20px !default;
$msk--button-icon-padding-top: 0.5rem !default;
$msk--button-icon-padding-bottom: 0 !default;
$msk--button-icon-material-sharp-top: 0.1875rem !default;

//Display sizes
$msk--size-11: 6rem !default; // 96px
$msk--size-10: 4.5rem !default; // 72px
$msk--size-9: 3.75rem !default; // 60px
$msk--size-8: 3.25rem !default; // 52px

//Standard sizes
$msk--size-7: 2.375rem !default; // h1,       38px
$msk--size-6: 2em !default; // h2,       32px
$msk--size-5: 1.625rem !default; // h3,       26px
$msk--size-4: 1.375rem !default; // h4,       22px
$msk--size-3: 1.125rem !default; // h5,       18px
$msk--size-2: 1rem !default; // h6, p,    16px
$msk--size-1: 0.875rem !default; // small,    14px
$msk--size-0: 0.75rem !default; // smallest, 12px

$msk--1-of-16: 6.25%;
$msk--2-of-16: 12.5%;
$msk--3-of-16: 18.75%;
$msk--4-of-16: 25%;
$msk--5-of-16: 31.25%;
$msk--6-of-16: 37.5%;
$msk--7-of-16: 43.75%;
$msk--8-of-16: 50%;
$msk--9-of-16: 56.25%;
$msk--10-of-16: 62.5%;
$msk--11-of-16: 68.75%;
$msk--12-of-16: 75%;
$msk--13-of-16: 81.25%;
$msk--14-of-16: 87.5%;
$msk--15-of-16: 93.75%;
$msk--16-of-16: 100%;

$msk--1-of-24: 4.16667%;
$msk--1-of-12: 8.33333%;
$msk--2-of-12: 16.66667%;
$msk--3-of-12: 25%;
$msk--7-of-24: 29.16667%;
$msk--4-of-12: 33.33333%;
$msk--9-of-24: 37.5%;
$msk--5-of-12: 41.66667%;
$msk--6-of-12: 50%;
$msk--7-of-12: 58.33333%;
$msk--8-of-12: 66.66667%;
$msk--17-of-24: 70.83333%;
$msk--9-of-12: 75%;
$msk--19-of-24: 79.16667%;
$msk--10-of-12: 83.33333%;
$msk--11-of-12: 91.66667%;
$msk--12-of-12: 100%;

// Checkbox and Radio buttons
$input-default-border-color: c.$msk--cool-gray-80;
$input-disabled-bg-color: c.$msk--warm-gray-10;
$input-disabled-border-color: c.$msk--warm-gray-50;
$input-disabled-label-color: c.$msk--warm-gray-70;
$input-error-color: c.$msk--red-70;
$input-hover-color: c.$msk--blue-10;

$hover-ui: c.$msk--cool-gray-10;

// input statement colors
$msk-color-invalid: c.$msk--magenta-80;
$msk-color-bg-disabled: c.$msk--warm-gray-10;

// form background colors
$msk-color-bg-form-blue: c.$msk--cool-gray-10;
$msk-color-bg-form-white: c.$msk--white-0;

// icon as background image

$msk-icon-bg-expand_more: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.59 8.29492L12 12.8749L7.41 8.29492L6 9.70492L12 15.7049L18 9.70492L16.59 8.29492Z" fill="black"/></svg>');
$msk-icon-bg-expand-less: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 8.29492L6 14.2949L7.41 15.7049L12 11.1249L16.59 15.7049L18 14.2949L12 8.29492Z" fill="black"/></svg>');
$msk-icon-bg-chevron-right: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.70492 6L8.29492 7.41L12.8749 12L8.29492 16.59L9.70492 18L15.7049 12L9.70492 6Z" fill="black"/></svg>');

$msk-form-vertical-space: 1.5rem;

$msk--font-family-sans: 'msk-sans', sans-serif !default;
$msk--font-family-source-sans: 'source-sans-pro', sans-serif !default;
$msk--icon-color: tk.$msk--color-content-primary !default;

// Tooltip
$msk--tooltip-padding: 16px !default;
$msk--tooltip-radius: 8px !default;
$msk--tooltip-button-padding: 4px 16px !default;
$msk--tooltip-button-radius: 4px !default;
$msk--tooltip-button-min-height: 2rem !default;
$msk--tooltip-shadow: rgba(0, 0, 0, 0.3) !default;
$msk--tooltip-drop-shadow: rgba(0, 0, 0, 0.2) !default;
$msk--tooltip-caret-size: 9px !default;

// edge

$msk--input-default-border-color: c.$msk--cool-gray-80;
$msk--input-disabled-bg-color: c.$msk--warm-gray-10;
$msk--input-disabled-border-color: c.$msk--warm-gray-50;
$msk--input-disabled-label-color: c.$msk--warm-gray-70;
$msk--input-error-color: c.$msk--red-70;
$msk--input-hover-color: c.$msk--blue-10;

$msk--btn-font-size: 16px;
$msk--btn-font-weight: 500;
$msk--btn-border-radius: 4px;
$msk--btn-outline-width: 1px;
$msk--btn-border-width: 0; //TODO

$msk--btn-padding: 12px 16px;
$msk--btn-padding-field: 8px 16px;
$msk--btn-padding-sm: 4px 16px;

$msk--btn-icon-size: 20px !default;
$msk--btn-icon-padding-top: 0.5rem !default;
$msk--btn-icon-padding-bottom: 0 !default;
$msk--btn-icon-material-sharp-top: 0.1875rem !default;