{"version":3,"file":"multiselect_v3.css","mappings":"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","sources":["webpack://@studyportals/multiselect-dll/./node_modules/@studyportals/multiselect/dist/multiselect.css","webpack://@studyportals/multiselect-dll/@studyportals/multiselect/Option.scss","webpack://@studyportals/multiselect-dll/@studyportals/multiselect/node_modules/@studyportals/styles-abstracts/variables/_colors.scss","webpack://@studyportals/multiselect-dll/@studyportals/multiselect/node_modules/@studyportals/styles-abstracts/variables/_z-index.scss","webpack://@studyportals/multiselect-dll/@studyportals/multiselect/node_modules/@studyportals/styles-abstracts/mixins/_responsive.scss","webpack://@studyportals/multiselect-dll/@studyportals/multiselect/node_modules/@studyportals/styles-abstracts/mixins/_shadow.scss","webpack://@studyportals/multiselect-dll/@studyportals/multiselect/node_modules/@studyportals/styles-abstracts/mixins/_typography.scss","webpack://@studyportals/multiselect-dll/@studyportals/multiselect/node_modules/@studyportals/styles-abstracts/mixins/_spacing.scss","webpack://@studyportals/multiselect-dll/@studyportals/multiselect/src/components/Option/Option.scss","webpack://@studyportals/multiselect-dll/@studyportals/multiselect/OptionGroup.scss","webpack://@studyportals/multiselect-dll/@studyportals/multiselect/src/components/OptionGroup/OptionGroup.scss","webpack://@studyportals/multiselect-dll/@studyportals/multiselect/SearchBox.scss","webpack://@studyportals/multiselect-dll/@studyportals/multiselect/src/components/SearchBox/SearchBox.scss","webpack://@studyportals/multiselect-dll/@studyportals/multiselect/SelectedOption.scss","webpack://@studyportals/multiselect-dll/@studyportals/multiselect/src/components/SelectedOption/SelectedOption.scss","webpack://@studyportals/multiselect-dll/@studyportals/multiselect/src/components/MultiSelect/MultiSelect.scss"],"sourcesContent":["/*!************************************************************************************************************************************************************************************************************************************************!*\\\n  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Option/Option.scss?vue&type=style&index=0&id=7cf903ef&lang=scss&scoped=true&external ***!\n  \\************************************************************************************************************************************************************************************************************************************************/\n@charset \"UTF-8\";\n/* Primary palette. */\n/* Grey palette. */\n/* Secondary palette. */\n/* Use this to reset items or place them at the bottom. */\n/* Use this for creating a new stacking context within an element. */\n/* Middle level for specific tweaking. */\n/* Header, Tooltips, Fixed elements. */\n/* Overlay for highlighting elements, Cookie wall. */\n/* Full page overlays and it’s contents, Highlighted elements. */\n/**\n * Apply the content that is between the brackets of the mixin usage only for the\n * breakpoint(s) that are included in the arguments.\n * @param {...String} $Arguments\n */\n/**\n * Apply box-shadow based on a desired percepted height of the element\n * @param {String} $Height\n */\n/* Primary palette. */\n/* Grey palette. */\n/* Secondary palette. */\n/**\n * Get heading size and corresponding breakpoint-dependant line-height for preset text styles\n * @param {String} $Style\n */\n/**\n * Get the areas values in rems based on the four dimensions.\n * The minimum amount of parameters is one and the maximum is four,\n * and they correspond with dimensions similarly as how they do\n * for the margin and padding css rules in general.\n * @param {list} $Args [0]\n * @return {number | list}\n */\n/**\n * @param {list} $args [0]\n */\n/**\n * @param {list} $args [0]\n */\n.MultiSelectOption[data-v-7cf903ef] {\n  display: flex;\n  align-items: center;\n  min-height: 40px;\n  box-sizing: border-box;\n  padding:  0.5rem;\n  margin:  0;\n  text-align: left;\n  font-size: 1rem;\n  line-height: 1.75rem;\n  font-weight: normal;\n  color: #05293C;\n  cursor: pointer;\n}\n.MultiSelectOption[data-v-7cf903ef]:hover {\n  background-color: #EDF3F6;\n}\n.MultiSelectOption.is-disabled[data-v-7cf903ef] {\n  color: #3F5C6E;\n}\n.MultiSelectOption.is-disabled[data-v-7cf903ef]:hover {\n  background-color: #FFFFFF;\n  cursor: not-allowed;\n}\n.MultiSelectOption .MultiSelectOptionIcon[data-v-7cf903ef] {\n  margin:  0 0.5rem 0 0;\n  font-size: 1rem;\n}\n/*!**********************************************************************************************************************************************************************************************************************************************************!*\\\n  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js!./src/components/OptionGroup/OptionGroup.scss?vue&type=style&index=0&id=9cc62a36&lang=scss&scoped=true&external ***!\n  \\**********************************************************************************************************************************************************************************************************************************************************/\n@charset \"UTF-8\";\n/* Primary palette. */\n/* Grey palette. */\n/* Secondary palette. */\n/* Use this to reset items or place them at the bottom. */\n/* Use this for creating a new stacking context within an element. */\n/* Middle level for specific tweaking. */\n/* Header, Tooltips, Fixed elements. */\n/* Overlay for highlighting elements, Cookie wall. */\n/* Full page overlays and it’s contents, Highlighted elements. */\n/**\n * Apply the content that is between the brackets of the mixin usage only for the\n * breakpoint(s) that are included in the arguments.\n * @param {...String} $Arguments\n */\n/**\n * Apply box-shadow based on a desired percepted height of the element\n * @param {String} $Height\n */\n/* Primary palette. */\n/* Grey palette. */\n/* Secondary palette. */\n/**\n * Get heading size and corresponding breakpoint-dependant line-height for preset text styles\n * @param {String} $Style\n */\n/**\n * Get the areas values in rems based on the four dimensions.\n * The minimum amount of parameters is one and the maximum is four,\n * and they correspond with dimensions similarly as how they do\n * for the margin and padding css rules in general.\n * @param {list} $Args [0]\n * @return {number | list}\n */\n/**\n * @param {list} $args [0]\n */\n/**\n * @param {list} $args [0]\n */\n.MultiSelectGroupLabel[data-v-9cc62a36] {\n  display: flex;\n  align-items: center;\n  height: 40px;\n  box-sizing: border-box;\n  padding:  0 0.5rem;\n  margin:  0;\n  font-size: 1rem;\n  line-height: 1.75rem;\n  font-weight: normal;\n  color: #547A92;\n}\n/*!******************************************************************************************************************************************************************************************************************************************************!*\\\n  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js!./src/components/SearchBox/SearchBox.scss?vue&type=style&index=0&id=708d0d57&lang=scss&scoped=true&external ***!\n  \\******************************************************************************************************************************************************************************************************************************************************/\n@charset \"UTF-8\";\n/* Primary palette. */\n/* Grey palette. */\n/* Secondary palette. */\n/* Use this to reset items or place them at the bottom. */\n/* Use this for creating a new stacking context within an element. */\n/* Middle level for specific tweaking. */\n/* Header, Tooltips, Fixed elements. */\n/* Overlay for highlighting elements, Cookie wall. */\n/* Full page overlays and it’s contents, Highlighted elements. */\n/**\n * Apply the content that is between the brackets of the mixin usage only for the\n * breakpoint(s) that are included in the arguments.\n * @param {...String} $Arguments\n */\n/**\n * Apply box-shadow based on a desired percepted height of the element\n * @param {String} $Height\n */\n/* Primary palette. */\n/* Grey palette. */\n/* Secondary palette. */\n/**\n * Get heading size and corresponding breakpoint-dependant line-height for preset text styles\n * @param {String} $Style\n */\n/**\n * Get the areas values in rems based on the four dimensions.\n * The minimum amount of parameters is one and the maximum is four,\n * and they correspond with dimensions similarly as how they do\n * for the margin and padding css rules in general.\n * @param {list} $Args [0]\n * @return {number | list}\n */\n/**\n * @param {list} $args [0]\n */\n/**\n * @param {list} $args [0]\n */\n.MultiSelectSearchBoxWrapper[data-v-708d0d57] {\n  position: relative;\n  margin:  0 0.5rem 0.5rem;\n  padding:  0.5rem 0;\n  border-bottom: 1px solid #B8C6CE;\n}\n.MultiSelectSearchBoxWrapper.up[data-v-708d0d57] {\n  border-bottom: 0;\n  border-top: 1px solid #B8C6CE;\n}\n.MultiSelectSearchBoxWrapper .MultiSelectSearchBox[data-v-708d0d57] {\n  width: 100%;\n  height: 40px;\n  padding:  0 0.5rem;\n  box-sizing: border-box;\n  border-radius: 5px;\n  border: 1px solid #3F5C6E;\n  font-size: 1rem;\n  line-height: 1.75rem;\n  font-weight: normal;\n  appearance: none;\n}\n.MultiSelectSearchBoxWrapper .MultiSelectSearchBox.is-empty[data-v-708d0d57] {\n  background: #EDF3F6;\n  border: 0;\n}\n.MultiSelectSearchBoxWrapper .MultiSelectSearchBox.is-empty[data-v-708d0d57]:focus {\n  border: 0;\n}\n.MultiSelectSearchBoxWrapper .MultiSelectSearchBox[data-v-708d0d57]:focus {\n  outline: none;\n  border: 1px solid #247BA0;\n}\n.MultiSelectSearchBoxWrapper .MultiSelectSearchBox[data-v-708d0d57]::placeholder {\n  color: #247BA0;\n}\n.MultiSelectSearchBoxWrapper .MultiSelectSearchBoxIcon[data-v-708d0d57] {\n  position: absolute;\n  right: 0.5rem;\n  top: 50%;\n  transform: translateY(-50%);\n}\n/*!****************************************************************************************************************************************************************************************************************************************************************!*\\\n  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js!./src/components/SelectedOption/SelectedOption.scss?vue&type=style&index=0&id=0008248f&lang=scss&scoped=true&external ***!\n  \\****************************************************************************************************************************************************************************************************************************************************************/\n@charset \"UTF-8\";\n/* Primary palette. */\n/* Grey palette. */\n/* Secondary palette. */\n/* Use this to reset items or place them at the bottom. */\n/* Use this for creating a new stacking context within an element. */\n/* Middle level for specific tweaking. */\n/* Header, Tooltips, Fixed elements. */\n/* Overlay for highlighting elements, Cookie wall. */\n/* Full page overlays and it’s contents, Highlighted elements. */\n/**\n * Apply the content that is between the brackets of the mixin usage only for the\n * breakpoint(s) that are included in the arguments.\n * @param {...String} $Arguments\n */\n/**\n * Apply box-shadow based on a desired percepted height of the element\n * @param {String} $Height\n */\n/* Primary palette. */\n/* Grey palette. */\n/* Secondary palette. */\n/**\n * Get heading size and corresponding breakpoint-dependant line-height for preset text styles\n * @param {String} $Style\n */\n/**\n * Get the areas values in rems based on the four dimensions.\n * The minimum amount of parameters is one and the maximum is four,\n * and they correspond with dimensions similarly as how they do\n * for the margin and padding css rules in general.\n * @param {list} $Args [0]\n * @return {number | list}\n */\n/**\n * @param {list} $args [0]\n */\n/**\n * @param {list} $args [0]\n */\n.MultiSelectSelectedOption[data-v-0008248f] {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  height: 30px;\n  box-sizing: border-box;\n  padding:  0 2rem 0 0.5rem;\n  margin:  0 0.5rem 0.5rem 0;\n  font-size: 1rem;\n  line-height: 1.75rem;\n  font-weight: normal;\n  color: #05293C;\n  background: #EDF3F6;\n  border-radius: 15px;\n  border: 1px solid #EDF3F6;\n}\n.MultiSelectSelectedOption[data-v-0008248f]:hover {\n  cursor: pointer;\n  text-decoration: line-through;\n  border: 1px solid #3F5C6E;\n}\n.MultiSelectSelectedOption[data-v-0008248f]:focus {\n  outline: none;\n}\n.MultiSelectSelectedOptionDelete[data-v-0008248f] {\n  position: absolute;\n  right: 0;\n  top: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 30px;\n  width: 30px;\n  margin:  0 0 0 0.5rem;\n  cursor: pointer;\n}\n/*!**********************************************************************************************************************************************************************************************************************************!*\\\n  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js!./src/components/MultiSelect/MultiSelect.scss?vue&type=style&index=0&lang=scss&external ***!\n  \\**********************************************************************************************************************************************************************************************************************************/\n@charset \"UTF-8\";\n/* Primary palette. */\n/* Grey palette. */\n/* Secondary palette. */\n/* Use this to reset items or place them at the bottom. */\n/* Use this for creating a new stacking context within an element. */\n/* Middle level for specific tweaking. */\n/* Header, Tooltips, Fixed elements. */\n/* Overlay for highlighting elements, Cookie wall. */\n/* Full page overlays and it’s contents, Highlighted elements. */\n/**\n * Apply the content that is between the brackets of the mixin usage only for the\n * breakpoint(s) that are included in the arguments.\n * @param {...String} $Arguments\n */\n/**\n * Apply box-shadow based on a desired percepted height of the element\n * @param {String} $Height\n */\n/* Primary palette. */\n/* Grey palette. */\n/* Secondary palette. */\n/**\n * Get heading size and corresponding breakpoint-dependant line-height for preset text styles\n * @param {String} $Style\n */\n/**\n * Get the areas values in rems based on the four dimensions.\n * The minimum amount of parameters is one and the maximum is four,\n * and they correspond with dimensions similarly as how they do\n * for the margin and padding css rules in general.\n * @param {list} $Args [0]\n * @return {number | list}\n */\n/**\n * @param {list} $args [0]\n */\n/**\n * @param {list} $args [0]\n */\n.MultiSelectWrapper {\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  padding:  0 0.5rem;\n  border-radius: 3px;\n  border: 1px solid #B8C6CE;\n  background: #FFFFFF;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n}\n.MultiSelectWrapper:focus {\n  border-color: #247BA0;\n  outline: none;\n}\n.MultiSelectWrapper.is-invalid {\n  border: 1px solid #E64632;\n}\n.MultiSelectWrapper.is-disabled {\n  background-color: #EDF3F6;\n  border: 0;\n}\n.MultiSelectWrapper.is-disabled .MultiSelectIcon {\n  border-top: 8px solid #547A92;\n}\n.MultiSelectWrapper.is-disabled .MultiSelectLabel {\n  cursor: not-allowed;\n}\n.MultiSelectWrapper .MultiSelectIcon {\n  position: absolute;\n  right: 1rem;\n  top: 50%;\n  width: 0;\n  height: 0;\n  border-left: 6px solid transparent;\n  border-right: 6px solid transparent;\n  border-top: 8px solid #05293C;\n  transform: translateY(-50%);\n  transition: 0.5s all;\n}\n.MultiSelectWrapper .MultiSelectIcon.is-active {\n  transform: rotate3d(1, 0, 0, 180deg) translateY(calc(-50% + 8px));\n}\n\n.MultiSelectLabel {\n  position: relative;\n  display: flex;\n  width: 100%;\n  height: 45px;\n  align-items: center;\n  cursor: pointer;\n}\n.MultiSelectLabel.is-empty {\n  color: #547A92;\n}\n.MultiSelectLabel .MultiSelectPlaceholder {\n  position: absolute;\n  left: 0.25rem;\n  max-width: calc(100% - 2rem);\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  text-align: left;\n}\n.MultiSelectLabel .FloatingLabel {\n  padding: 0 0.25rem;\n  transition: all 0.3s;\n  font-size: 1rem;\n  line-height: 1.75rem;\n  font-weight: normal;\n  color: #547A92;\n  cursor: pointer;\n}\n.MultiSelectLabel .FloatingLabel.is-active {\n  transform: translateY(-24px);\n  font-size: 0.75rem;\n  line-height: 1rem;\n  font-weight: normal;\n  background: linear-gradient(0deg, #FFFFFF 50%, transparent 50%);\n  cursor: default;\n}\n\n.MultiSelectDropDown {\n  position: absolute;\n  top: calc(100% + 0.5rem);\n  left: 0;\n  z-index: 50;\n  min-width: 100%;\n  max-height: 18.75rem;\n  height: 18.75rem;\n  overflow: auto;\n  box-sizing: border-box;\n  box-shadow: 0 2px 8px #B8C6CE;\n  border-radius: 3px;\n  background-color: #FFFFFF;\n}\n.MultiSelectDropDown.searchable {\n  overflow: hidden;\n}\n.MultiSelectDropDown ol {\n  list-style-type: none;\n  margin:  0;\n  padding:  0;\n}\n.MultiSelectDropDown > .searchable {\n  overflow: auto;\n  height: calc(100% - 4rem);\n}\n.MultiSelectDropDown.overflow-up {\n  top: 0;\n  display: flex;\n  flex-direction: column-reverse;\n  transform: translateY(-19.5rem);\n}\n.MultiSelectDropDown.overflow-up > .searchable {\n  overflow: auto;\n  height: 100%;\n}\n\n.MultiSelectSelectedOptions {\n  width: 100%;\n  padding:  0 1.5rem 0 0;\n  box-sizing: border-box;\n  text-align: left;\n}\n\n.ValidationLabel,\n.HelperMessage {\n  padding: 0.5rem 0 0.5rem 0.75rem;\n  color: #547A92;\n  font-size: 0.75rem;\n  line-height: 1rem;\n  font-weight: normal;\n  text-align: left;\n}\n\n.ValidationLabel {\n  color: #E64632;\n}\n\n","@charset \"UTF-8\";\n/* Primary palette. */\n/* Grey palette. */\n/* Secondary palette. */\n/* Use this to reset items or place them at the bottom. */\n/* Use this for creating a new stacking context within an element. */\n/* Middle level for specific tweaking. */\n/* Header, Tooltips, Fixed elements. */\n/* Overlay for highlighting elements, Cookie wall. */\n/* Full page overlays and it’s contents, Highlighted elements. */\n/**\n * Apply the content that is between the brackets of the mixin usage only for the\n * breakpoint(s) that are included in the arguments.\n * @param {...String} $Arguments\n */\n/**\n * Apply box-shadow based on a desired percepted height of the element\n * @param {String} $Height\n */\n/* Primary palette. */\n/* Grey palette. */\n/* Secondary palette. */\n/**\n * Get heading size and corresponding breakpoint-dependant line-height for preset text styles\n * @param {String} $Style\n */\n/**\n * Get the areas values in rems based on the four dimensions.\n * The minimum amount of parameters is one and the maximum is four,\n * and they correspond with dimensions similarly as how they do\n * for the margin and padding css rules in general.\n * @param {list} $Args [0]\n * @return {number | list}\n */\n/**\n * @param {list} $args [0]\n */\n/**\n * @param {list} $args [0]\n */\n.MultiSelectOption {\n  display: flex;\n  align-items: center;\n  min-height: 40px;\n  box-sizing: border-box;\n  padding:  0.5rem;\n  margin:  0;\n  text-align: left;\n  font-size: 1rem;\n  line-height: 1.75rem;\n  font-weight: normal;\n  color: #05293C;\n  cursor: pointer;\n}\n.MultiSelectOption:hover {\n  background-color: #EDF3F6;\n}\n.MultiSelectOption.is-disabled {\n  color: #3F5C6E;\n}\n.MultiSelectOption.is-disabled:hover {\n  background-color: #FFFFFF;\n  cursor: not-allowed;\n}\n.MultiSelectOption .MultiSelectOptionIcon {\n  margin:  0 0.5rem 0 0;\n  font-size: 1rem;\n}","/* Primary palette. */\r\n$BrandOrange: #F95C39;\r\n$BrandOrangeD: #CC4C2F;\r\n$BrandOrangeL: #FEDED7;\r\n\r\n$BrandBlue: #247BA0;\r\n$BrandBlueD: #1B5A75;\r\n$BrandBlueL: #4B93B1;\r\n\r\n/* Grey palette. */\r\n$GreyDD: #05293C;\r\n$GreyD: #3F5C6E;\r\n$Grey: #547A92;\r\n$GreyL: #B8C6CE;\r\n$GreyLL: #EDF3F6;\r\n$GreyLLL: #F5F9FA;\r\n\r\n$White: #FFFFFF;\r\n\r\n/* Secondary palette. */\r\n$Red: #E64632;\r\n$RedL: #FFA79A;\r\n$RedLL: #FADAD6;\r\n\r\n$Green: #1E8558;\r\n$GreenL: #D2E7DE;\r\n$GreenLL: #EDF5F2;\r\n\r\n$Yellow: #FFAA00;\r\n$YellowL: #FEE7C0;\r\n$YellowLL: #FEF7E9;","$GroundFloor: 0; /* Use this to reset items or place them at the bottom. */\r\n$FirstFloor: 25; /* Use this for creating a new stacking context within an element. */\r\n$SecondFloor: 50; /* Middle level for specific tweaking. */\r\n$ThirdFloor: 75; /* Header, Tooltips, Fixed elements. */\r\n$FourthFloor: 100; /* Overlay for highlighting elements, Cookie wall. */\r\n$PentHouse: 125;  /* Full page overlays and it’s contents, Highlighted elements. */","/**\r\n * Apply the content that is between the brackets of the mixin usage only for the\r\n * breakpoint(s) that are included in the arguments.\r\n * @param {...String} $Arguments\r\n */\r\n\r\n@mixin Breakpoint($Arguments...){\r\n\r\n\t@each $Parameter in $Arguments{\r\n\t\t/* 480px / 16px = 30rem */\r\n\t\t@if $Parameter == Small {\r\n\r\n\t\t\t@media #{all} and (max-width: 480px) { @content; }\r\n\t\t}\r\n\t\t\t/* 481px / 16px = 30.063rem and 768px / 16px = 48rem */\r\n\t\t@else if $Parameter == Medium{\r\n\r\n\t\t\t@media #{all} and (min-width: 481px) and (max-width: 768px) { @content; }\r\n\t\t}\r\n\t\t\t/* 769px / 16px = 48.063rem and 1024px / 16px = 64rem */\r\n\t\t@else if $Parameter == Large{\r\n\r\n\t\t\t@media #{all} and (min-width: 769px) and (max-width: 1024px) { @content; }\r\n\t\t}\r\n\t\t\t/* 1025px / 16px = 64.0625rem */\r\n\t\t@else if $Parameter == ExtraLarge{\r\n\r\n\t\t\t@media #{all} and (min-width: 1025px) { @content; }\r\n\t\t}\r\n\t\t@else{\r\n\r\n\t\t\t@error 'Please use a valid breakpoint!';\r\n\t\t}\r\n\t}\r\n}","/**\r\n * Apply box-shadow based on a desired percepted height of the element\r\n * @param {String} $Height\r\n */\r\n@import '../variables/colors';\r\n\r\n@mixin Shadow($Height){\r\n\r\n\t@if $Height == LowInverted {\r\n\t\tbox-shadow: 0 -2px 2px rgba($GreyD, 0.15);\r\n\t}\r\n\r\n\t@if $Height == HighInverted {\r\n\t\tbox-shadow: 0 -4px 8px rgba($GreyD, 0.15);\r\n\t}\r\n\r\n\t@if $Height == Low {\r\n\t\tbox-shadow: 0 2px 2px rgba($GreyD, 0.15);\r\n\t}\r\n\r\n\t@if $Height == High {\r\n\t\tbox-shadow: 0 4px 8px rgba($GreyD, 0.15);\r\n\t}\r\n }\r\n","@use \"sass:math\";\r\n\r\n/**\r\n * Get heading size and corresponding breakpoint-dependant line-height for preset text styles\r\n * @param {String} $Style\r\n */\r\n\r\n@mixin TextStyle($Style, $IncludeSpacing: false) {\r\n\t$Root: 16;\r\n\r\n\t@if $Style == Title500{\r\n\r\n\t\tfont-size: math.div(54, $Root) + rem;\r\n\t\tline-height: math.div(64, $Root) + rem;\r\n\t\tfont-weight: bold;\r\n\r\n\t\t@if $IncludeSpacing == true {\r\n\t\t\t@include MarginAreas(4, 0);\r\n\t\t}\r\n\r\n\t\t@include Breakpoint(Small, Medium){\r\n\t\t\tfont-size: math.div(36, $Root) + rem;\r\n\t\t\tline-height: math.div(48, $Root) + rem;\r\n\t\t\tfont-weight: bold;\r\n\r\n\t\t\t@if $IncludeSpacing == true {\r\n\t\t\t\t@include MarginAreas(3, 0);\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t@else if $Style == Title400{\r\n\r\n\t\tfont-size: math.div(36, $Root) + rem;\r\n\t\tline-height: math.div(48, $Root) + rem;\r\n\t\tfont-weight: bold;\r\n\r\n\t\t@if $IncludeSpacing == true {\r\n\t\t\t@include MarginAreas(3, 0);\r\n\t\t}\r\n\r\n\t\t@include Breakpoint(Small, Medium){\r\n\t\t\tfont-size: math.div(36, $Root) + rem;\r\n\t\t\tline-height: math.div(48, $Root) + rem;\r\n\t\t\tfont-weight: normal;\r\n\r\n\t\t\t@if $IncludeSpacing == true {\r\n\t\t\t\t@include MarginAreas(3, 0, 1, 0);\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t@else if $Style == Title300{\r\n\r\n\t\tfont-size: math.div(36, $Root) + rem;\r\n\t\tline-height: math.div(48, $Root) + rem;\r\n\t\tfont-weight: normal;\r\n\r\n\t\t@if $IncludeSpacing == true {\r\n\t\t\t@include MarginAreas(3, 0, 1, 0);\r\n\t\t}\r\n\r\n\t\t@include Breakpoint(Small, Medium){\r\n\t\t\tfont-size: math.div(24, $Root) + rem;\r\n\t\t\tline-height: math.div(32, $Root) + rem;\r\n\t\t\tfont-weight: bold;\r\n\r\n\t\t\t@if $IncludeSpacing == true {\r\n\t\t\t\t@include MarginAreas(3, 0, 1, 0);\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t@else if $Style == Title200{\r\n\r\n\t\tfont-size: math.div(24, $Root) + rem;\r\n\t\tline-height: math.div(32, $Root) + rem;\r\n\t\tfont-weight: bold;\r\n\r\n\t\t@if $IncludeSpacing == true {\r\n\t\t\t@include MarginAreas(3, 0, 1, 0);\r\n\t\t}\r\n\r\n\t\t@include Breakpoint(Small, Medium){\r\n\t\t\tfont-size: math.div(16, $Root) + rem;\r\n\t\t\tline-height: math.div(24, $Root) + rem;\r\n\t\t\tfont-weight: bold;\r\n\r\n\t\t\t@if $IncludeSpacing == true {\r\n\t\t\t\t@include MarginAreas(1, 0, 0.5, 0);\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t@else if $Style == Title100{\r\n\r\n\t\tfont-size: math.div(16, $Root) + rem;\r\n\t\tline-height: math.div(24, $Root) + rem;\r\n\t\tfont-weight: bold;\r\n\r\n\t\t@if $IncludeSpacing == true {\r\n\t\t\t@include MarginAreas(1, 0, 0.5, 0);\r\n\t\t}\r\n\t}\r\n\r\n\t@else if $Style == Highlight{\r\n\r\n\t\tfont-size: math.div(20, $Root) + rem;\r\n\t\tline-height: math.div(32, $Root) + rem;\r\n\t\tfont-weight: normal;\r\n\r\n\t\t@if $IncludeSpacing == true {\r\n\t\t\t@include MarginAreas(0, 0, 1.5, 0)\r\n\t\t}\r\n\t}\r\n\r\n\t@else if $Style == Body{\r\n\r\n\t\tfont-size: math.div(16, $Root) + rem;\r\n\t\tline-height: math.div(28, $Root) + rem;\r\n\t\tfont-weight: normal;\r\n\r\n\t\t@if $IncludeSpacing == true {\r\n\t\t\t@include MarginAreas(0, 0, 1.5, 0)\r\n\t\t}\r\n\t}\r\n\r\n\t@else if $Style == BodyNarrow{\r\n\r\n\t\tfont-size: math.div(16, $Root) + rem;\r\n\t\tline-height: math.div(24, $Root) + rem;\r\n\t\tfont-weight: normal;\r\n\r\n\t\t@if $IncludeSpacing == true {\r\n\t\t\t@include MarginAreas(0, 0, 1.5, 0)\r\n\t\t}\r\n\t}\r\n\r\n\t@else if $Style == Bullet{\r\n\r\n\t\t@include MarginAreas(0, 0, 1.5, 0);\r\n\r\n\t\tli {\r\n\t\t\tfont-size: math.div(16, $Root) + rem;\r\n\t\t\tline-height: math.div(32, $Root) + rem;\r\n\t\t\tfont-weight: normal;\r\n\t\t}\r\n\r\n\t\t@if $IncludeSpacing == true {\r\n\t\t\t@include MarginAreas(0, 0, 1.5, 0)\r\n\t\t}\r\n\t}\r\n\r\n\t@else if $Style == Note{\r\n\r\n\t\tfont-size: math.div(12, $Root) + rem;\r\n\t\tline-height: math.div(16, $Root) + rem;\r\n\t\tfont-weight: normal;\r\n\r\n\t\t@if $IncludeSpacing == true {\r\n\t\t\t@include MarginAreas(0, 0, 0.5, 0)\r\n\t\t}\r\n\t}\r\n\r\n\t/**\r\n\t\tLabel is not apart of the final typgoraphy decision,\r\n\t\tdecision: replace Label with Note 04-03-2021 @Den @Mike C.\r\n\t**/\r\n\t@else if $Style == Label{\r\n\r\n\t\tfont-size: math.div(12, $Root) + rem;\r\n\t\tline-height: math.div(16, $Root) + rem;\r\n\t\tfont-weight: normal;\r\n\t\ttext-transform: uppercase;\r\n\t\tletter-spacing: 0.5px;\r\n\t}\r\n\r\n\t@else{\r\n\r\n\t\t@error 'Please use a valid text style!';\r\n\t}\r\n}\r\n","/**\r\n * Get the areas values in rems based on the four dimensions.\r\n * The minimum amount of parameters is one and the maximum is four,\r\n * and they correspond with dimensions similarly as how they do\r\n * for the margin and padding css rules in general.\r\n * @param {list} $Args [0]\r\n * @return {number | list}\r\n */\r\n@function GetAreas($Args...){\r\n\r\n\t$Areas: '';\r\n\r\n\t@if (length($Args) == 5){\r\n\r\n\t\t@error 'You have too many arguments in spacing areas.';\r\n\t}\r\n\r\n\t@each $Value in $Args{\r\n\r\n\t\t@if(\r\n\t\t\t$Value != 0 and\r\n\t\t\t$Value != 0.25 and\r\n\t\t\t$Value != 0.5 and\r\n\t\t\t$Value != 1 and\r\n\t\t\t$Value != 1.5 and\r\n\t\t\t$Value != 2 and\r\n\t\t\t$Value != 3 and\r\n\t\t\t$Value != 4 and\r\n\t\t\t$Value != 5 and\r\n\t\t\t$Value != 7\r\n\t\t){\r\n\r\n\t\t\t@error \"#{$Value} is an invalid parameter.\";\r\n\t\t} @else if($Value == 0){\r\n\r\n\t\t\t$Areas: JoinString($Areas, 0);\r\n\t\t} @else{\r\n\r\n\t\t\t$Areas: JoinString($Areas, $Value, 'rem');\r\n\t\t}\r\n\t}\r\n\r\n\t@return unquote($Areas);\r\n}\r\n\r\n@function JoinString($ExistingAreas, $NewArea, $Append: ''){\r\n\r\n\t@return  $ExistingAreas + ' ' + $NewArea + $Append;\r\n}\r\n\r\n/**\r\n * @param {list} $args [0]\r\n */\r\n@mixin MarginAreas($Args...){\r\n\r\n\tmargin: GetAreas($Args...);\r\n}\r\n\r\n/**\r\n * @param {list} $args [0]\r\n */\r\n@mixin PaddingAreas($Args...){\r\n\r\n\tpadding: GetAreas($Args...);\r\n}\r\n","@import '~@studyportals/styles-abstracts/abstracts.scss';\n\n.MultiSelectOption {\n\tdisplay: flex;\n\talign-items: center;\n\tmin-height: 40px;\n\tbox-sizing: border-box;\n\t@include PaddingAreas(0.5);\n\t@include MarginAreas(0);\n\n\ttext-align: left;\n\t@include TextStyle(Body);\n\tcolor: $GreyDD;\n\n\tcursor: pointer;\n\n\t&:hover {\n\t\tbackground-color: $GreyLL;\n\t}\n\n\t&.is-disabled {\n\t\tcolor: $GreyD;\n\n\t\t&:hover {\n\t\t\tbackground-color: $White;\n\t\t\tcursor: not-allowed;\n\t\t}\n\t}\n\n\t.MultiSelectOptionIcon {\n\t\t@include MarginAreas(0, 0.5, 0, 0);\n\n\t\tfont-size: 1rem;\n\t}\n}\n","@charset \"UTF-8\";\n/* Primary palette. */\n/* Grey palette. */\n/* Secondary palette. */\n/* Use this to reset items or place them at the bottom. */\n/* Use this for creating a new stacking context within an element. */\n/* Middle level for specific tweaking. */\n/* Header, Tooltips, Fixed elements. */\n/* Overlay for highlighting elements, Cookie wall. */\n/* Full page overlays and it’s contents, Highlighted elements. */\n/**\n * Apply the content that is between the brackets of the mixin usage only for the\n * breakpoint(s) that are included in the arguments.\n * @param {...String} $Arguments\n */\n/**\n * Apply box-shadow based on a desired percepted height of the element\n * @param {String} $Height\n */\n/* Primary palette. */\n/* Grey palette. */\n/* Secondary palette. */\n/**\n * Get heading size and corresponding breakpoint-dependant line-height for preset text styles\n * @param {String} $Style\n */\n/**\n * Get the areas values in rems based on the four dimensions.\n * The minimum amount of parameters is one and the maximum is four,\n * and they correspond with dimensions similarly as how they do\n * for the margin and padding css rules in general.\n * @param {list} $Args [0]\n * @return {number | list}\n */\n/**\n * @param {list} $args [0]\n */\n/**\n * @param {list} $args [0]\n */\n.MultiSelectGroupLabel {\n  display: flex;\n  align-items: center;\n  height: 40px;\n  box-sizing: border-box;\n  padding:  0 0.5rem;\n  margin:  0;\n  font-size: 1rem;\n  line-height: 1.75rem;\n  font-weight: normal;\n  color: #547A92;\n}","@import '~@studyportals/styles-abstracts/abstracts.scss';\n\n.MultiSelectGroupLabel {\n\tdisplay: flex;\n\talign-items: center;\n\theight: 40px;\n\tbox-sizing: border-box;\n\t@include PaddingAreas(0, 0.5);\n\t@include MarginAreas(0);\n\n\t@include TextStyle(Body);\n\tcolor: $Grey;\n}\n","@charset \"UTF-8\";\n/* Primary palette. */\n/* Grey palette. */\n/* Secondary palette. */\n/* Use this to reset items or place them at the bottom. */\n/* Use this for creating a new stacking context within an element. */\n/* Middle level for specific tweaking. */\n/* Header, Tooltips, Fixed elements. */\n/* Overlay for highlighting elements, Cookie wall. */\n/* Full page overlays and it’s contents, Highlighted elements. */\n/**\n * Apply the content that is between the brackets of the mixin usage only for the\n * breakpoint(s) that are included in the arguments.\n * @param {...String} $Arguments\n */\n/**\n * Apply box-shadow based on a desired percepted height of the element\n * @param {String} $Height\n */\n/* Primary palette. */\n/* Grey palette. */\n/* Secondary palette. */\n/**\n * Get heading size and corresponding breakpoint-dependant line-height for preset text styles\n * @param {String} $Style\n */\n/**\n * Get the areas values in rems based on the four dimensions.\n * The minimum amount of parameters is one and the maximum is four,\n * and they correspond with dimensions similarly as how they do\n * for the margin and padding css rules in general.\n * @param {list} $Args [0]\n * @return {number | list}\n */\n/**\n * @param {list} $args [0]\n */\n/**\n * @param {list} $args [0]\n */\n.MultiSelectSearchBoxWrapper {\n  position: relative;\n  margin:  0 0.5rem 0.5rem;\n  padding:  0.5rem 0;\n  border-bottom: 1px solid #B8C6CE;\n}\n.MultiSelectSearchBoxWrapper.up {\n  border-bottom: 0;\n  border-top: 1px solid #B8C6CE;\n}\n.MultiSelectSearchBoxWrapper .MultiSelectSearchBox {\n  width: 100%;\n  height: 40px;\n  padding:  0 0.5rem;\n  box-sizing: border-box;\n  border-radius: 5px;\n  border: 1px solid #3F5C6E;\n  font-size: 1rem;\n  line-height: 1.75rem;\n  font-weight: normal;\n  appearance: none;\n}\n.MultiSelectSearchBoxWrapper .MultiSelectSearchBox.is-empty {\n  background: #EDF3F6;\n  border: 0;\n}\n.MultiSelectSearchBoxWrapper .MultiSelectSearchBox.is-empty:focus {\n  border: 0;\n}\n.MultiSelectSearchBoxWrapper .MultiSelectSearchBox:focus {\n  outline: none;\n  border: 1px solid #247BA0;\n}\n.MultiSelectSearchBoxWrapper .MultiSelectSearchBox::placeholder {\n  color: #247BA0;\n}\n.MultiSelectSearchBoxWrapper .MultiSelectSearchBoxIcon {\n  position: absolute;\n  right: 0.5rem;\n  top: 50%;\n  transform: translateY(-50%);\n}","@import '~@studyportals/styles-abstracts/abstracts.scss';\n\n.MultiSelectSearchBoxWrapper {\n\tposition: relative;\n\n\t@include MarginAreas(0, 0.5, 0.5);\n\t@include PaddingAreas(0.5, 0);\n\n\tborder-bottom: 1px solid $GreyL;\n\n\t&.up {\n\t\tborder-bottom: 0;\n\t\tborder-top: 1px solid $GreyL;\n\t}\n\n\t.MultiSelectSearchBox {\n\t\twidth: 100%;\n\t\theight: 40px;\n\t\t@include PaddingAreas(0, 0.5);\n\t\tbox-sizing: border-box;\n\n\t\tborder-radius: 5px;\n\t\tborder: 1px solid $GreyD;\n\n\t\t@include TextStyle(Body);\n\n\t\tappearance: none;\n\n\t\t&.is-empty {\n\t\t\tbackground: $GreyLL;\n\t\t\tborder: 0;\n\n\t\t\t&:focus {\n\t\t\t\tborder: 0;\n\t\t\t}\n\t\t}\n\n\t\t&:focus {\n\t\t\toutline: none;\n\t\t\tborder: 1px solid $BrandBlue;\n\t\t}\n\n\t\t&::placeholder {\n\t\t\tcolor: $BrandBlue;\n\t\t}\n\t}\n\n\t.MultiSelectSearchBoxIcon {\n\t\tposition: absolute;\n\t\tright: 0.5rem;\n\t\ttop: 50%;\n\n\t\ttransform: translateY(-50%);\n\t}\n}\n","@charset \"UTF-8\";\n/* Primary palette. */\n/* Grey palette. */\n/* Secondary palette. */\n/* Use this to reset items or place them at the bottom. */\n/* Use this for creating a new stacking context within an element. */\n/* Middle level for specific tweaking. */\n/* Header, Tooltips, Fixed elements. */\n/* Overlay for highlighting elements, Cookie wall. */\n/* Full page overlays and it’s contents, Highlighted elements. */\n/**\n * Apply the content that is between the brackets of the mixin usage only for the\n * breakpoint(s) that are included in the arguments.\n * @param {...String} $Arguments\n */\n/**\n * Apply box-shadow based on a desired percepted height of the element\n * @param {String} $Height\n */\n/* Primary palette. */\n/* Grey palette. */\n/* Secondary palette. */\n/**\n * Get heading size and corresponding breakpoint-dependant line-height for preset text styles\n * @param {String} $Style\n */\n/**\n * Get the areas values in rems based on the four dimensions.\n * The minimum amount of parameters is one and the maximum is four,\n * and they correspond with dimensions similarly as how they do\n * for the margin and padding css rules in general.\n * @param {list} $Args [0]\n * @return {number | list}\n */\n/**\n * @param {list} $args [0]\n */\n/**\n * @param {list} $args [0]\n */\n.MultiSelectSelectedOption {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  height: 30px;\n  box-sizing: border-box;\n  padding:  0 2rem 0 0.5rem;\n  margin:  0 0.5rem 0.5rem 0;\n  font-size: 1rem;\n  line-height: 1.75rem;\n  font-weight: normal;\n  color: #05293C;\n  background: #EDF3F6;\n  border-radius: 15px;\n  border: 1px solid #EDF3F6;\n}\n.MultiSelectSelectedOption:hover {\n  cursor: pointer;\n  text-decoration: line-through;\n  border: 1px solid #3F5C6E;\n}\n.MultiSelectSelectedOption:focus {\n  outline: none;\n}\n\n.MultiSelectSelectedOptionDelete {\n  position: absolute;\n  right: 0;\n  top: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 30px;\n  width: 30px;\n  margin:  0 0 0 0.5rem;\n  cursor: pointer;\n}","@import '~@studyportals/styles-abstracts/abstracts.scss';\n\n.MultiSelectSelectedOption {\n\tposition: relative;\n\n\tdisplay: inline-flex;\n\talign-items: center;\n\theight: 30px;\n\tbox-sizing: border-box;\n\t@include PaddingAreas(0, 2, 0, 0.5);\n\t@include MarginAreas(0, 0.5, 0.5, 0);\n\n\t@include TextStyle(Body);\n\tcolor: $GreyDD;\n\n\tbackground: $GreyLL;\n\n\tborder-radius: 15px;\n\tborder: 1px solid $GreyLL;\n\n\t&:hover {\n\t\tcursor: pointer;\n\t\ttext-decoration: line-through;\n\t\tborder: 1px solid $GreyD;\n\t}\n\n\t&:focus {\n\t\toutline: none;\n\t}\n}\n\n.MultiSelectSelectedOptionDelete {\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\theight: 30px;\n\twidth: 30px;\n\t@include MarginAreas(0, 0, 0, 0.5);\n\n\tcursor: pointer;\n}\n","@import '~@studyportals/styles-abstracts/abstracts.scss';\n\n.MultiSelectWrapper {\n\tposition: relative;\n\twidth: 100%;\n\tbox-sizing: border-box;\n\t@include PaddingAreas(0, 0.5);\n\n\tborder-radius: 3px;\n\tborder: 1px solid $GreyL;\n\n\tbackground: $White;\n\n\tcursor: pointer;\n\n\t-webkit-tap-highlight-color: transparent;\n\n\t&:focus {\n\t\tborder-color: $BrandBlue;\n\t\toutline: none;\n\t}\n\n\t&.is-invalid {\n\t\tborder: 1px solid $Red;\n\t}\n\n\t&.is-disabled {\n\t\tbackground-color: $GreyLL;\n\t\tborder: 0;\n\n\t\t.MultiSelectIcon {\n\t\t\tborder-top: 8px solid $Grey;\n\t\t}\n\n\t\t.MultiSelectLabel {\n\t\t\tcursor: not-allowed;\n\t\t}\n\t}\n\n\t.MultiSelectIcon {\n\t\tposition: absolute;\n\t\tright: 1rem;\n\t\ttop: 50%;\n\n\t\twidth: 0;\n\t\theight: 0;\n\n\t\tborder-left: 6px solid transparent;\n\t\tborder-right: 6px solid transparent;\n\t\tborder-top: 8px solid $GreyDD;\n\n\t\ttransform: translateY(-50%);\n\n\t\ttransition: 0.5s all;\n\n\t\t&.is-active {\n\t\t\ttransform: rotate3d(1, 0, 0, 180deg) translateY(calc(-50% + 8px));\n\t\t}\n\t}\n}\n\n.MultiSelectLabel {\n\tposition: relative;\n\n\tdisplay: flex;\n\twidth: 100%;\n\theight: 45px;\n\talign-items: center;\n\n\tcursor: pointer;\n\n\t&.is-empty {\n\t\tcolor: $Grey;\n\t}\n\n\t.MultiSelectPlaceholder {\n\t\tposition: absolute;\n\t\tleft: 0.25rem;\n\n\t\tmax-width: calc(100% - 2rem);\n\t\toverflow: hidden;\n\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\ttext-align: left;\n\t}\n\n\t.FloatingLabel {\n\t\tpadding: 0 0.25rem;\n\n\t\ttransition: all 0.3s;\n\n\t\t@include TextStyle(Body);\n\t\tcolor: $Grey;\n\n\t\tcursor: pointer;\n\n\t\t&.is-active {\n\t\t\ttransform: translateY(-24px);\n\n\t\t\t@include TextStyle(Note);\n\n\t\t\tbackground: linear-gradient(0deg, $White 50%, transparent 50%);\n\n\t\t\tcursor: default;\n\t\t}\n\t}\n}\n\n.MultiSelectDropDown {\n\tposition: absolute;\n\ttop: calc(100% + 0.5rem);\n\tleft: 0;\n\tz-index: $SecondFloor;\n\n\tmin-width: 100%;\n\tmax-height: 18.75rem;\n\theight: 18.75rem;\n\toverflow: auto;\n\tbox-sizing: border-box;\n\tbox-shadow: 0 2px 8px $GreyL;\n\n\tborder-radius: 3px;\n\n\tbackground-color: $White;\n\n\t&.searchable {\n\t\toverflow: hidden;\n\t}\n\n\tol {\n\t\tlist-style-type: none;\n\t\t@include MarginAreas(0);\n\t\t@include PaddingAreas(0);\n\t}\n\n\t> .searchable {\n\t\toverflow: auto;\n\t\theight: calc(100% - 4rem);\n\t}\n\n\t&.overflow-up {\n\t\ttop: 0;\n\t\tdisplay: flex;\n\t\tflex-direction: column-reverse;\n\t\ttransform: translateY(-19.5rem);\n\n\t\t> .searchable {\n\t\t\toverflow: auto;\n\t\t\theight: 100%;\n\t\t}\n\t}\n}\n\n.MultiSelectSelectedOptions {\n\twidth: 100%;\n\t@include PaddingAreas(0, 1.5, 0, 0);\n\tbox-sizing: border-box;\n\n\ttext-align: left;\n}\n\n.ValidationLabel,\n.HelperMessage {\n\tpadding: 0.5rem 0 0.5rem 0.75rem;\n\n\tcolor: $Grey;\n\t@include TextStyle(Note);\n\ttext-align: left;\n}\n\n.ValidationLabel {\n\tcolor: $Red;\n}\n"],"names":[],"sourceRoot":""}