// Add scss variables here that can be used in another scss files.
//
// For example, if you define a variable in this file
//
//   $some-standard-color: red;
//
// you can use in renalware/modules/users.scss like so
//
//   @import "../base/variables";
//
//   div.some-class {
//     background-color: $some-standard-color;
//   }

//
// Colours
//

// NHS Colours
$nhs-yellow: #FAE100;
$nhs-warm-yellow: #FFB81C;
$nhs-orange: #ED8B00;
$nhs-red: #D81E05;

$nhs-emergency-red: #DA291C;
$nhs-dark-red: #8A1538;
$nhs-dark-pink: #7C2855;
$nhs-purple: #330072;
$nhs-pink: #AE2573;

$nhs-dark-blue: #003087;
$nhs-blue: #005EB8;
$nhs-bright-blue: #0072CE;
$nhs-light-blue: #41B6E6;
$nhs-aqua-blue: #00A9CE;

$nhs-aqua-green: #00A499;
$nhs-light-green: #78BE20;
$nhs-green: #009639;
$nhs-dark-green: #006747;

$dashboard-muted-color: #888;
$link-colour: $primary-color; // #008CBA;
$link-focus-colour: #0078a0;
$link-hover-colour: #64d6fb;
$white: #FFF;
$off-white: #EEE;
$dark-grey: #222;
$muted-dark-grey: #555;
$light-grey: #DDD;
$mid-grey: #999;
$very-light-grey: #f5f5f5;
$error-background: $off-white;

// Drug type colours
$drug-type-default-colour: none;
$drug-type-esa-colour: #FFFF99;
$drug-type-immunosuppressant-colour: #CCFeFF;

// Patient header/banner
$patient-header-muted-color: #777;
$patient-header-icon-color: #bbb;
$patient-header-bg-color: $nhs-blue;

// Bookmarks
$bookmark-urgent-colour: #FFFFC8;

// Letter states

$letter-state-unknown: $mid-grey;
$letter-state-draft: $nhs-aqua-blue;
$letter-state-pending-review: $nhs-orange;
$letter-state-approved: $nhs-green;
$letter-state-completed: $nhs-dark-green;

// Modals
$max-modal-height: 600px;

$mini-profile-backgound-colour: #DEF0F6;
$mini-profile-renal-backgound-colour: #DEF0F6;
$mini-profile-allergies-backgound-colour: $nhs-yellow;

$letter-preview-background-colour: #ddd;

// tables
$table-even-row-colour: #FCFCFC;
$table-border-colour: #CCC;
$table-toggled-content-colour: #FEFFF1;
$table-urgent-colour: $nhs-yellow;

$footer-colour: #C0C0C0;
$footer-bg-colour: #FAFAFA;

$patient-menu-background-colour: #eeeeee;
$menu-divider-colour: #E6E6E6;

// Forms
$form-hint-colour: #BBB;
$disabled-colour: #CCC;

// Menus
$patient-menu-icon-color: $gainsboro;
$patient-menu-icon-hover-color: $white;

//
// Lists
//
$dl-horizontal-dt-width: 9rem;

$patient-side-nav-width: 15rem;

// Select2
$select2-input-height: 2.2rem;

// Breakpoints
$small-range: (0em, 40em);
$medium-range: (40.063em, 64em);
$large-range: (64.063em, 90em);
$xlarge-range: (90.063em, 120em);
$xxlarge-range: (120.063em, 99999999em);

$screen: "only screen";

$landscape: "#{$screen} and (orientation: landscape)";
$portrait: "#{$screen} and (orientation: portrait)";

$small-up: $screen;
$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})";

$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})";
$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})";

$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})";
$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})";

$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})";
$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})";

$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})";
$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})";