{"version":3,"file":"notification_v1.min.css","mappings":"AAEA,cAMC,qBCSO,CDRP,oBACA,iCAEA,aACA,sBAVA,mBACA,gBACA,YACA,WAOA,CESE,+CFpBH,cAcE,eACA,WACA,UESC,0BFzBH,cAcE,eACA,WACA,UENC,yBFVH,cAuBE,YAFA,cACA,eAFA,SAGA,EERC,8CFfH,cAuBE,YAFA,cACA,eAFA,SAGA,EAGD,gCAGC,aADA,aADA,UAEA,CAEA,0CAGC,gCACA,iCACA,8BAHA,YADA,UAIA,CAIF,mCACC,aACA,mBAEA,uDAKC,gCADA,6BADA,YAFA,kBACA,WAGA,CAGD,0DACC,aGoGD,iBAEA,gBADA,iBHrGC,YGsGD,CHlGC,4EAEC,YADA,cACA,CAGD,+EACC,aACA,sBACA,8BIZH,aJeG,iGACC,gBAGD,oGACC,aACA,mBACA,2BItBJ,iBJ6BA,8BACC,wBCpFY,CDuFb,gCACC,qBC7DO,CDgER,2BACC,wBCrEM,CDyER,UACC,4BAGD,WACC,8BAGD,oBACC,GAEC,SAAQ,CADR,0BACA,EAIF,qBACC,GAEC,SAAQ,CADR,0BACA","sources":["webpack://@studyportals/notification-dll/@studyportals/notification/notification.scss","webpack://@studyportals/notification-dll/@studyportals/notification/node_modules/@studyportals/styles-abstracts/variables/_colors.scss","webpack://@studyportals/notification-dll/@studyportals/notification/node_modules/@studyportals/styles-abstracts/mixins/_responsive.scss","webpack://@studyportals/notification-dll/@studyportals/notification/node_modules/@studyportals/styles-abstracts/mixins/_typography.scss","webpack://@studyportals/notification-dll/@studyportals/notification/node_modules/@studyportals/styles-abstracts/mixins/_spacing.scss"],"sourcesContent":["@import \"~@studyportals/styles-abstracts/abstracts.scss\";\n\n.Notification {\n\theight: fit-content;\n\tmin-height: 50px;\n\twidth: 350px;\n\tz-index: $FourthFloor;\n\n\tbackground-color: $White;\n\tborder-radius: 0.5rem;\n\tbox-shadow: 0 2px 2px 0 rgb(63 92 110 / 15%);\n\n\tdisplay: flex;\n\tflex-direction: column;\n\n\t@include Breakpoint(Large, ExtraLarge) {\n\t\tposition: fixed;\n\t\tright: 1rem;\n\t\ttop: 1rem;\n\t}\n\n\t@include Breakpoint(Small, Medium) {\n\t\twidth: 95%;\n\t\tmargin: 0 auto;\n\t\tposition: fixed;\n\t\tbottom: 1rem;\n\t}\n\n\t.TimerBarProgress {\n\t\twidth: 100%;\n\t\theight: 0.5rem;\n\t\tdisplay: flex;\n\n\t\t.TimerBar {\n\t\t\twidth: 100%;\n\t\t\theight: 100%;\n\t\t\tborder-bottom-left-radius: 0.5rem;\n\t\t\tborder-bottom-right-radius: 0.5rem;\n\t\t\tborder-top-right-radius: 0.5rem;\n\t\t}\n\t}\n\n\t.NotificationWrapper {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\n\t\t.NotificationAccent {\n\t\t\tposition: absolute;\n\t\t\twidth: 0.5rem;\n\t\t\theight: 100%;\n\t\t\tborder-top-left-radius: 0.5rem;\n\t\t\tborder-bottom-left-radius: 0.5rem;\n\t\t}\n\t\n\t\t.NotificationContainer {\n\t\t\tdisplay: flex;\n\t\t\t@include MarginAreas(0.5);\n\t\t\t@include TextStyle(Note);\n\t\n\t\t\t.NotficationImage {\n\t\t\t\tmax-width: 80px;\n\t\t\t\tmargin: auto;\n\t\t\t}\n\t\n\t\t\t.NotificationContent {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tjustify-content: space-between;\n\t\t\t\t@include MarginAreas(0.5);\n\t\n\t\t\t\t.NotificationText {\n\t\t\t\t\ttext-align: left;\n\t\t\t\t}\n\t\n\t\t\t\t.NotificationButtons {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\tflex-direction: row;\n\t\t\t\t\tjustify-content: flex-start;\n\t\t\t\t\t@include MarginAreas(0.5,0,0,0);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t.action-primary {\n\t\tbackground-color: $BrandOrange\n\t}\n\n\t.action-secondary {\n\t\tbackground-color: $Yellow\n\t}\n\n\t.information {\n\t\tbackground-color: $Green\n\t}\n}\n\n.slide-in {\n\tanimation: slide-in .8s ease;\n}\n\n.slide-out {\n\tanimation: slide-out 1.5s ease;\n}\n\n@keyframes slide-in {\n\tfrom {\n\t\ttransform: translateX(100%);\n\t\topacity: 0;\n\t}\n}\n\n@keyframes slide-out {\n\tto {\n\t\ttransform: translateX(200%);\n\t\topacity: 0;\n\t}\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;","/**\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}","@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"],"names":[],"sourceRoot":""}