@randstad-design/orbit-multitheme/dist/assets/theme-spherion/bundles/my-environment.css.map

multitheme Front-end code based on Randstad Human Forward components

{"version":3,"sources":["../scss/03_molecules/_body-copy.scss","00_helpers/variables/_colors.scss","00_helpers/mixins/_font-style.scss","00_helpers/variables/_fonts.scss","00_helpers/variables/_spacing.scss","00_helpers/variables/_lists.scss","../scss/04_organisms/my-environment/_my-environment-avatar.scss","00_helpers/mixins/_media-queries.scss","../scss/04_organisms/my-environment/_my-environment-container.scss","00_helpers/mixins/_my-environment.scss","../scss/00_tools/cssVartoSass.scss","../scss/04_organisms/my-environment/_my-environment-controls.scss","../scss/04_organisms/my-environment/_my-environment-dashboard.scss","00_helpers/mixins/grid/_grid-gutter.scss","00_helpers/variables/_sizing.scss","00_helpers/mixins/indicators/_rating.scss","00_helpers/mixins/_svg-base64.scss","../scss/04_organisms/my-environment/_my-environment-header.scss","../scss/04_organisms/my-environment/_my-environment-item.scss","../scss/04_organisms/my-environment/_my-environment-list.scss","00_helpers/mixins/_text-ellipsis.scss","00_helpers/variables/_transitions.scss","../scss/04_organisms/my-environment/_my-environment-removable-card.scss"],"names":[],"mappings":"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B,oBCQsB;MDPtB,iBCMmB,EAAA;MIyBjB;QK9DJ;UV4BE,oDCXmE;UDYnE,eCmBiB;UDlBjB,oBCoBsB;UDnBtB,iBCkBmB,EAAA,ESnChB;IAdL;MV4BE,oDCXmE;MDYnE,eCuDiB;MDtDjB,yBCwD2B;MDvD3B,iBCsDmB;MSnEf,gBAAgB,EAAA;ML4ClB;QK9DJ;UV4BE,oDCXmE;UDYnE,eCmEiB;UDlEjB,yBCoE2B;UDnE3B,iBCkEmB,EAAA,ES9EhB;IAnBL;MV4BE,0CCb+C;MDc/C,eCLiB;MDMjB,oBCJsB;MDKtB,iBCNmB,EAAA;MIqCjB;QK9DJ;UV4BE,0CCb+C;UDc/C,eCOiB;UDNjB,oBCQsB;UDPtB,iBCMmB,EAAA,ESdhB;IAvBL;MA0BM,UAAU,EAAA;IA1BhB;MA8BM,iBAAiB,EAAA;ELgCnB;IK9DJ;MAmCI,sDAAqD;MACrD,kCC7BoE,EAAA,EDyEvE;EAzCC;IAvCF;MAyCM,cAAc,EAAA,EACf;ELyCD;IKnFJ;MAiDQ,mBAAmB,EAAA;IAjD3B;;;MAuDQ,YR1CkB,EAAA;IQb1B;;MA6DU,YAAY,EAAA;IA7DtB;MAkEQ,0BAA0B,EAAA;MAlElC;QAqEU,0BAA0B;QAC1B,YAAY,EAAA;IAtEtB;MA4EQ,iBRhEkB,EAAA,EQiEnB;;AG1CL;ECJE,8cAAud,EAAA;;ADIzd;ECJE,2cAAud;EDard,4BAAoB;EAApB,oBAAoB;EACpB,YAAY,EAAA;;AN5ChB;EAGI,cRDoB,EAAA;EQFxB;IAMM,cRHkB,EAAA;;AQSxB;EACE,mBR0BmB;EQxBnB,6CCdyC,EAAA;EDW3C;IAMI,cR0BiB,EAAA;EQhCrB;IAUM,cRpBkB,EAAA;EQUxB;IAcG,cRvBqB,EAAA;;AQ2BxB;EACE,cR7BsB,EAAA;;AQgCxB;EACE,mBRImB,EAAA;;AgBxCvB;EACE,oBAAa;EAAb,qBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,yBAA8B;EAA9B,sCAA8B;EAA9B,sBAA8B;EAA9B,8BAA8B,EAAA;EAG5B;IfuBF,oDCXmE;IDYnE,eCmBiB;IDlBjB,oBCoBsB;IDnBtB,iBCkBmB,EAAA;IIajB;MUzDA;QfuBF,oDCXmE;QDYnE,eC+BiB;QD9BjB,yBCgC2B;QD/B3B,iBC8BmB,EAAA,EcrDhB;EAED;IfkBF,oDCXmE;IDYnE,eCmBiB;IDlBjB,oBCoBsB;IDnBtB,iBCkBmB,EAAA;EclCjB;IfaF,0CCb+C;IDc/C,eCaiB;IDZjB,oBCcsB;IDbtB,iBCYmB,EAAA;IImBjB;MU/CA;QfaF,oDCXmE;QDYnE,eCmBiB;QDlBjB,oBCoBsB;QDnBtB,iBCkBmB,EAAA,Ec/BhB;;AAMH;EfIA,oDCXmE;EDYnE,eC+BiB;ED9BjB,yBCgC2B;ED/B3B,iBC8BmB,EAAA;;AcvCrB;EASI,oBAAa;EAAb,qBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,wBAAuB;EAAvB,+BAAuB;EAAvB,qBAAuB;EAAvB,uBAAuB,EAAA;;AAV3B;EAeI,iBAAiB,EAAA;;AAIrB;EfbE,oDCXmE;EDYnE,eC+BiB;ED9BjB,yBCgC2B;ED/B3B,iBC8BmB,EAAA;EICjB;IUrBJ;MfbE,oDCXmE;MDYnE,eCuDiB;MDtDjB,yBCwD2B;MDvD3B,iBCsDmB,EAAA,Ec1CpB;;AR1CC;EAGI,cRDoB,EAAA;EQFxB;IAMM,cRHkB,EAAA;;AQSxB;EACE,mBR0BmB;EQxBnB,6CCdyC,EAAA;EDW3C;IAMI,cR0BiB,EAAA;EQhCrB;IAUM,cRpBkB,EAAA;EQUxB;IAcG,cRvBqB,EAAA;;AQ2BxB;EACE,cR7BsB,EAAA;;AQgCxB;EACE,mBRImB,EAAA;;AiBtCrB;EhB0BA,0CCb+C;EDc/C,eCOiB;EDNjB,oBCQsB;EDPtB,iBCMmB,EAAA;EenClB;IAIG,kBAAkB,EAAA;IAJrB;MAOK,kBAAkB;MAClB,eAAe,EAAA;IARpB;MAYK,edJsB,EAAA;;AcS5B;EAEE,oBAAa;EAAb,qBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,4BAAsB;EAAtB,6BAAsB;EAAtB,8BAAsB;EAAtB,0BAAsB;EAAtB,sBAAsB,EAAA;EAHvB;IAMG,8BAAsB;IAAtB,2BAAsB;IAAtB,sBAAsB,EAAA;;AXqCxB;EW7BE;IACE,8BAAmB;IAAnB,6BAAmB;IAAnB,2BAAmB;IAAnB,uBAAmB;IAAnB,mBAAmB;IACnB,yBAA8B;IAA9B,sCAA8B;IAA9B,sBAA8B;IAA9B,8BAA8B,EAAA;IAF/B;MAKG,4BAAoB;MAApB,wBAAoB;MAApB,oBAAoB,EAAA,EACrB;;AXCL;EWQJ;IAGE,WAAW,EAAA,EAUZ;;AXCG;EWdJ;IAOE,WAAW,EAAA,EAMZ;;AXsBG;EWnCJ;IAWE,WAAW,EAAA,EAEZ;;AC7DD;EACE,yBAAmB;EAAnB,2BAAmB;EAAnB,sBAAmB;EAAnB,mBAAmB;EACnB,oBAAa;EAAb,qBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,uBAAe;EAAf,mBAAe;EAAf,eAAe,EAAA;EAEf;ICFA,qBADuD;IAEvD,eAF+B;IAG/B,gBAAgB;IAChB,uBAAuB;IACvB,mBAAmB;IDAjB,2BAAmB;IAAnB,4BAAmB;IAAnB,mBAAmB;IACnB,wBAAwB,EAAA;EAG1B;IACE,4BAAQ;IAAR,gBAAQ;IAAR,iBAAQ;IAAR,QAAQ;IACR,WAAW,EAAA;EAGb;IACE,gBAAgB,EAAA;EAjBpB;;IAsBI,SAAS;IACT,UAAU;IACV,2BAA2B;IAC3B,6EEvBsB;IFuBtB,qEEvBsB,EAAA;Ed4DtB;IY9DJ;MA+BI,yBAAiB;MAAjB,qBAAiB;MAAjB,iBAAiB,EAAA;MAEjB;QACE,cAAc,EAAA;QADf;UAIG,iBAAiB,EAAA;MAIrB;QACE,2BAA2B,EAAA;MAG7B;QACE,iBAAiB;QACjB,4BAAQ;QAAR,gBAAQ;QAAR,iBAAQ;QAAR,QAAQ;QACR,2BAA2B,EAAA;MAI7B;QACE,gBfxCoB,EAAA;Meb1B;QAyDM,iBf7CoB,EAAA,Ee8CrB;;AG1DL;EACE,kBRQoB;EQPpB,iBAAiB;EACjB,mBAAmB;EACnB,UAAU,EAAA;;AbHV;EAGI,cRDoB,EAAA;EQFxB;IAMM,cRHkB,EAAA;;AQSxB;EACE,mBR0BmB;EQxBnB,6CCdyC,EAAA;EDW3C;IAMI,cR0BiB,EAAA;EQhCrB;IAUM,cRpBkB,EAAA;EQUxB;IAcG,cRvBqB,EAAA;;AQ2BxB;EACE,cR7BsB,EAAA;;AQgCxB;EACE,mBRImB,EAAA","file":"my-environment.css","sourcesContent":[".body-copy {\n  overflow-anchor: none;\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    color: $color-brand--one;\n  }\n\n  h2 {\n    @include font-style($body-copy-title--s, $body-copy-title--s);\n    margin-bottom: $spacing--s;\n\n    & + ol,\n    & + ul {\n      margin-top: $spacing--m;\n    }\n  }\n\n  h3 {\n    @include font-style($body-copy-title--xs, $body-copy-title--xs);\n      margin-bottom: $spacing--xs;\n\n    & + ol,\n    & + ul {\n      margin-top: $spacing--s;\n    }\n  }\n\n  h4 {\n    @include font-style('title--xxs', 'title--xxs');\n      margin-bottom: $spacing--xs;\n\n    & + ol,\n    & + ul {\n      margin-top: $spacing--s;\n    }\n  }\n\n  .title--s {\n    @include font-style($body-copy-title--s, $body-copy-title--s);\n    margin-bottom: $spacing--s;\n\n    & + ol,\n    & + ul {\n      margin-top: $spacing--m;\n    }\n  }\n\n  .title--xxs,\n  .title--xs {\n    margin-bottom: $spacing--xs;\n\n    & + ol,\n    & + ul {\n      margin-top: $spacing--s;\n    }\n  }\n\n  // lists\n  ol,\n  ul {\n    margin-bottom: $spacing--m;\n\n    & + ol,\n    & + ul {\n      margin-top: $spacing--l;\n    }\n  }\n\n  li {\n    padding-left: $body-copy-list-item-spacing;\n\n    &::before {\n      color: $color-brand--one;\n      display: inline-block;\n      margin-left: -($body-copy-list-item-spacing);\n      min-width: 31px;\n    }\n  }\n\n  li + li {\n    margin-top: $spacing--xs;\n  }\n  // unordered list\n  ul:not(.list--checks) li::before {\n    content: '\\2022';\n    font-size: 1.2em;\n    padding-left: 5px;\n  }\n  // ordered list\n  ol {\n    counter-reset: li;\n    list-style: none;\n\n    li {\n      counter-increment: li;\n    }\n\n    li::before {\n      content: counter(li) '.' ' ';\n      position: relative;\n    }\n  }\n  // remove spacing for last item\n  p:last-child,\n  ul:last-child,\n  ol:last-child {\n    margin-bottom: 0;\n  }\n\n  a {\n    text-decoration: underline solid currentColor;\n\n    &:hover {\n      text-decoration: underline solid transparent;\n    }\n  }\n  // background and typo mappings\n  @include body-copy-background-mapping;\n\n}\n","$color-brand--black: #000000;\n$color-brand--white: #fff;\n\n$color-brand--one: #ff661a;\n$color-brand--two: #2e2e2e;\n$color-brand--three: #1f82db;\n$color-brand--four: #c4c4c4;\n$color-brand--five: #f8f8f8;\n$color-brand--six: #97999b;\n\n$color-brand--gradient-orange: linear-gradient(\n  56.45deg,\n  #ff8200 0%,\n  #ed1f24 100%\n);\n$color-brand--gradient-orange-50: linear-gradient(\n  56.45deg,\n  #ff9b33 0%,\n  #ed4e52 100%\n);\n$color-brand--gradient-blue: linear-gradient(45deg, #1f82db 0%, #1166b3 100%);\n$color-brand--gradient-purple: linear-gradient(\n  45deg,\n  #595a9f 0%,\n  #6152a3 50%,\n  #292765 100%\n);\n// user interface colors\n//\n// additional colors, such as surface, background and error colors, typically don't\n// represent the brand but can be applied sparingly to accent select parts of your UI.\n//\n\n$color--black-80: #303030;\n\n$color--grey: #e2e2e2;\n$color--grey-10: #f8f8f8;\n\n$color--white: #fff;\n\n$color--one-10: #fff0e8;\n$color--one-80: #ff8548;\n$color--one-130: #e64c00;\n\n$color--two-50: #97999b;\n$color--two-80: #4d4d4d;\n$color--two-180: #000000;\n\n$color--three-5: #edf6ff;\n\n$color--four-80: #f9f7f3;\n$color--four-110: #dedcd8;\n\n$color--negative: #f13c23;\n$color--negative-5: #fef5f4;\n\n$color--positive: #11d15e;\n$color--positive-5: #f3fdf7;\n\n$color--warning: #e9a204;\n$color--warning-10: #fcf5e5;\n\n// user interface opacities\n//\n// opacity colors are only used on modal backgrounds. HEX colors would not be\n// used due to the colors' alpha layers.\n//\n\n$color-alpha--one-10: rgba(255, 102, 26, 0.1);\n$color-alpha--one-30: rgba(255, 102, 26, 0.3);\n\n$color-alpha--two-10: rgba(0, 0, 0, 0.1);\n$color-alpha--two-30: rgba(0, 0, 0, 0.3);\n$color-alpha--two-70: rgba(0, 0, 0, 0.7);\n$color-alpha--two-80: rgba(0, 0, 0, 0.8);\n\n$color-alpha--four-30: rgba(255, 255, 255, 0.2);\n$color-alpha--four-50: rgba(255, 255, 255, 0.5);\n\n// set color values\n$color--disabled: $color--two-50;\n$color--text: $color-brand--two;\n$color--one-light: $color--one-10;\n\n// degree brand colors\n// used in the charts as extra color scheme\n$color-brand--one-65: #ffc8ad;\n$color-brand--one-45: #ffe7da;\n$color-brand--one-25: #f7beb9;\n$color-brand--two-65: #afaf;\n$color-brand--two-45: #dbdbdb;\n$color-brand--two-25: #fce8b5;\n$color-brand--three-65: #afd2f2;\n$color-brand--three-45: #dbebf9;\n$color-brand--five-25: #a6c8f0;\n$color-brand--six-65: #dadadb;\n$color-brand--six-45: #eeefef;\n$color-brand--six-25: #c4dbe1;\n\n// degree user interface colors\n// used in the charts as extra color scheme\n$color--positive-65: #aaefc5;\n$color--positive-45: #d9f8e5;\n\n// notice colors\n$color-notice--warning: #fff2f2;\n","// @font-style($font-style-small, $font-style-large)\n\n// $font-style-small - Desired type size for small/medium viewport.\n// $font-style-large - Desired type size for large viewport. This includes default fallback\n//                     for the S/M viewport.\n\n//\n// | viewport S       | viewport M       | viewport L      | default mapping |\n// |------------------|------------------|-----------------|-----------------|\n// | title l    | 40  | title l    | 40  | title xxl  | 80 | default         |\n// | title m    | 32  | title m    | 32  | title xl   | 60 | default         |\n// | title s    | 26  | title s    | 26  | title l    | 40 |                 |\n// | title s    | 26  | title s    | 26  | title m    | 32 | default         |\n// | title xs   | 20  | title xs   | 20  | title s    | 26 |                 |\n// | title xs   | 20  | title xs   | 20  | title xs   | 20 | default         |\n// | title xxs  | 18  | title xxs  | 18  | title xxs  | 18 |                 |\n// |            |     |            |     |            |    |                 |\n// | body l     | 18  | body l     | 18  | body l     | 18 |                 |\n// | body m     | 16  | body m     | 16  | body m     | 16 |                 |\n// | body s     | 12  | body s     | 12  | body s     | 12 |                 |\n\n// import variables needed for the mixins\n@import '../variables/__variables.scss';\n\n// mixin to get applicable properties for chosen type size\n@mixin typeset($type) {\n  $type: map-get($types, $type);\n\n  font-family: (map-get($type, font-family));\n  font-size: (map-get($type, font-size));\n  text-transform: (map-get($type, text-transform));\n  line-height: (map-get($type, line-height));\n}\n\n// get correct font characteristics based on font\n@mixin type-size($size) {\n  $size: map-get($type-sizes, $size);\n  @include typeset($size);\n}\n\n// mixin to get font-size\n@mixin font-style($font-style-small: 'body--l', $font-style-large: null) {\n  // if both arguments are added\n  @if ($font-style-large != null) {\n    // make sure $font-style-small & $font-style-large are not equal\n    @if ($font-style-small != $font-style-large) {\n      @include type-size($font-style-small);\n\n      @include viewport--l {\n        @include type-size($font-style-large);\n      }\n    } @else {\n      @include type-size($font-style-small);\n    }\n  } @else {\n    @include type-size($font-style-small);\n    // default font style mappings\n    @if ($font-style-small == 'title--l') {\n      @include viewport--l {\n        @include type-size('title--xxl');\n      }\n    } @else if ($font-style-small == 'title--m') {\n      @include viewport--l {\n        @include type-size('title--xl');\n      }\n    } @else if ($font-style-small == 'title--s') {\n      @include viewport--l {\n        @include type-size('title--m');\n      }\n    }\n  }\n}\n","// | viewport S       | viewport M       | viewport L      | default mapping |\n// |------------------|------------------|-----------------|-----------------|\n// | title l    | 40  | title l    | 40  | title xxl  | 80 | default         |\n// | title m    | 32  | title m    | 32  | title xl   | 60 | default         |\n// | title s    | 26  | title s    | 26  | title l    | 40 |                 |\n// | title s    | 26  | title s    | 26  | title m    | 32 | default         |\n// | title xs   | 20  | title xs   | 20  | title s    | 26 |                 |\n// | title xs   | 20  | title xs   | 20  | title xs   | 20 | default         |\n// | title xxs  | 18  | title xxs  | 18  | title xxs  | 18 |                 |\n// |            |     |            |     |            |    |                 |\n// | body l     | 18  | body l     | 18  | body l     | 18 |                 |\n// | body m     | 16  | body m     | 16  | body m     | 16 |                 |\n// | body s     | 12  | body s     | 12  | body s     | 12 |                 |\n\n// font family\n$font-family-theme: Montserrat, arial, sans-serif;\n$font-family-theme-semibold: Montserrat-SemiBold, arial, sans-serif;\n$font-family-theme-extrabold: Montserrat-ExtraBold, arial, sans-serif;\n// assets path to font\n// this path is overwritten in component CSS\n\n// font mappings - font-size / line-height / letter-spacing\n$types: (\n  12: (\n    font-size: 12px,\n    line-height: 15px,\n    text-transform: none,\n    font-family: $font-family-theme\n  ),\n  14: (\n    font-size: 14px,\n    line-height: 25px,\n    text-transform: none,\n    font-family: $font-family-theme\n  ),\n  16: (\n    font-size: 16px,\n    line-height: 25px,\n    text-transform: none,\n    font-family: $font-family-theme\n  ),\n  18: (\n    font-size: 18px,\n    line-height: 30px,\n    text-transform: none,\n    font-family: $font-family-theme\n  ),\n  20: (\n    font-size: 20px,\n    line-height: 30px,\n    text-transform: none,\n    font-family: $font-family-theme-extrabold\n  ),\n  20s: (\n    font-size: 20px,\n    line-height: 30px,\n    text-transform: none,\n    font-family: $font-family-theme-semibold\n  ),\n  26: (\n    font-size: 26px,\n    line-height: 30px,\n    text-transform: uppercase,\n    font-family: $font-family-theme-extrabold\n  ),\n  26s: (\n    font-size: 26px,\n    line-height: 30px,\n    text-transform: none,\n    font-family: $font-family-theme-semibold\n  ),\n  32: (\n    font-size: 32px,\n    line-height: 40px,\n    text-transform: uppercase,\n    font-family: $font-family-theme-extrabold\n  ),\n  32s: (\n    font-size: 32px,\n    line-height: 40px,\n    text-transform: none,\n    font-family: $font-family-theme-semibold\n  ),\n  40: (\n    font-size: 40px,\n    line-height: 45px,\n    text-transform: uppercase,\n    font-family: $font-family-theme-extrabold\n  ),\n  40s: (\n    font-size: 40px,\n    line-height: 45px,\n    text-transform: none,\n    font-family: $font-family-theme-semibold\n  ),\n  60: (\n    font-size: 60px,\n    line-height: 60px,\n    text-transform: uppercase,\n    font-family: $font-family-theme-extrabold\n  ),\n  80: (\n    font-size: 80px,\n    line-height: 80px,\n    text-transform: uppercase,\n    font-family: $font-family-theme-extrabold\n  )\n);\n\n// type-sizes - links the type-size to correct font mapping\n$type-sizes: (\n  title--xxl: 80,\n  title--xl: 60,\n  title--l: 40,\n  title--l-slim: 40s,\n  title--m: 32,\n  title--m-slim: 32s,\n  title--s: 26,\n  title--s-slim: 26s,\n  title--xs: 20,\n  title--xs-slim: 20s,\n  title--xxs: 18,\n  body--l: 18,\n  body--m: 16,\n  body--s: 14,\n  body--xs: 12\n);\n","// | variable      | size  | calculation     |\n// |---------------|-------|-----------------|\n// | $spacing--xxs |  5px  | $baseline * 0.5 |\n// | $spacing--xs  | 10px  | $baseline * 1   |\n// | $spacing--s   | 20px  | $baseline * 2   |\n// | $spacing--m   | 30px  | $baseline * 3   |\n// | $spacing--l   | 50px  | $baseline * 5   |\n// | $spacing--xl  | 80px  | $baseline * 8   |\n// | $spacing--xxl | 130px | $baseline * 13  |\n\n$spacing--xxs: $baseline * 0.5;\n$spacing--xs: $baseline * 1;\n$spacing--s: $baseline * 2;\n$spacing--m: $baseline * 3;\n$spacing--l: $baseline * 5;\n$spacing--xl: $baseline * 8;\n$spacing--xxl: $baseline * 13;\n\n// grid spacings\n$grid-margin--s: 25px;\n$grid-margin--m: 50px;\n$grid-margin--l: 100px;\n","// bullet item size\n$body-copy-list-item-spacing: 35px;\n",".my-environment-container {\n\n  .avatar-info {\n    display: flex;\n    flex-direction: column;\n\n    &__name {\n      @include font-style('title--xs', 'title--s');\n    }\n\n    @include viewport--l {\n      align-items: center;\n      flex-direction: row;\n    }\n  }\n}\n","// @viewport--x($reversed)\n\n// viewport s\n@mixin viewport--s($type: null) {\n  // inversed\n  @if ($type == 'inversed') {\n    @media (max-width: #{($breakpoint-viewport--s - 1)}) {\n      @content;\n    }\n  }\n  // range\n  @else if ($type== 'range') {\n    @media (min-width:0) and (max-width: #{($breakpoint-viewport--s - 1)}) {\n      @content;\n    }\n  }\n  // default\n  @else {\n    @media (min-width: #{$breakpoint-viewport--s}) {\n      @content;\n    }\n  }\n}\n\n// viewport m\n@mixin viewport--m($type: null) {\n  // inversed\n  @if ($type == 'inversed') {\n    @media (max-width: #{($breakpoint-viewport--m - 1)}) {\n      @content;\n    }\n  }\n  // range\n  @else if ($type== 'range') {\n    @media (min-width: $breakpoint-viewport--m) and (max-width: #{($breakpoint-viewport--l - 1)}) {\n      @content;\n    }\n  }\n  // default\n  @else {\n    @media (min-width: #{$breakpoint-viewport--m}) {\n      @content;\n    }\n  }\n}\n\n// viewport l\n@mixin viewport--l($type: null) {\n  // inversed\n  @if ($type == 'inversed') {\n    @media (max-width: #{($breakpoint-viewport--l - 1)}) {\n      @content;\n    }\n  }\n  // range\n  @else if ($type== 'range') {\n    @media (min-width: $breakpoint-viewport--l) and (max-width: #{($breakpoint-viewport--xl - 1)}) {\n      @content;\n    }\n  }\n  // default\n  @else {\n    @media (min-width: #{$breakpoint-viewport--l}) {\n      @content;\n    }\n  }\n}\n\n// viewport xl\n@mixin viewport--xl($type: null) {\n  @if ($type == 'inversed') {\n    @media (max-width: #{($breakpoint-viewport--xl - 1)}) {\n      @content;\n    }\n  }\n  // range\n  @else if ($type== 'range') {\n    @media (min-width: $breakpoint-viewport--xl) and (max-width: #{($breakpoint-viewport--xxl - 1)}) {\n      @content;\n    }\n  }\n  // default\n  @else {\n    @media (min-width: #{$breakpoint-viewport--xl}) {\n      @content;\n    }\n  }\n}\n\n// viewport xxl\n@mixin viewport--xxl($type: null) {\n  // inversed\n  @if ($type == 'inversed') {\n    @media (max-width: #{($breakpoint-viewport--xxl - 1)}) {\n      @content;\n    }\n  }\n  // default\n  @else {\n    @media (min-width: #{$breakpoint-viewport--xxl}) {\n      @content;\n    }\n  }\n}\n\n// viewport range\n@mixin viewport--range($viewport1, $viewport2) {\n  @media (min-width: #{($viewport1)}) and (max-width: #{($viewport2 - 1)}) {\n    @content;\n  }\n}\n\n// Internet Explorer 10 + 11\n@mixin internet-explorer-10-11 {\n  @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {\n    @content;\n  }\n}\n",".my-environment-container {\n\n  .view-more-link {\n    display: flex;\n    justify-content: center;\n  }\n\n  &+ .my-environment-container {\n    margin-top: $spacing--m;\n  }\n\n  .my-environment--empty-state {\n    width: 100%;\n  }\n\n  @include viewport--l {\n    &+ .my-environment-container {\n    margin-top: $spacing--l;\n    }\n  }\n\n  @include my-environment-bg-map;\n}\n","@mixin my-environment-bg-map {\n  .my-environment__controls {\n\n    .icon {\n      color: $color-brand--one;\n\n      &:hover {\n        color: $color-brand--two;\n      }\n    }\n\n  }\n\n  .dashboard-card.cards__item {\n    background: $color--one-light;\n\n    background: returnColorCSSVar('brand-primary-tint-7');\n      &--top,\n      &--bottom {\n      color: $color--two-80;\n      }\n\n      &--middle {\n        color: $color-brand--one;\n      }\n\n    .cards__link {\n     color: $color-brand--two;\n    }\n  }\n\n  .my-environment-header {\n    color: $color-brand--one;\n  }\n\n  .my-environment-item__card {\n    background: $color--one-light;\n  }\n}\n","// Returns CSS4 color variables\n@function returnColorCSSVar($color-name) {\n  @return var(--color-#{$color-name});\n}\n",".my-environment__controls {\n  align-self: start;\n  display: flex;\n\n  button:nth-child(n+2) {\n    margin-left: $baseline * 2.2;\n  }\n\n  .button--clean {\n    display: flex;\n  }\n\n  .icon {\n    cursor: pointer;\n  }\n\n  &--list {\n    align-self: center;\n    margin-left: auto;\n    order: 3\n  }\n}\n\n@include my-environment-bg-map;\n",".dashboard-cards {\n  display: grid;\n  grid-template-columns: repeat(2, grid-columns(3, 6));\n  grid-gap: $spacing--xl grid-gutter('s');\n  row-gap: $spacing--s;\n\n  .dashboard-card {\n    border-radius: $border-radius--l;\n    overflow: hidden;\n    overflow-wrap: break-word;\n    width: auto;\n\n    &--top {\n      @include font-style('body--m', 'title--xs');\n    }\n\n    &--middle {\n      @include font-style('title--l', 'title--xl');\n      overflow: hidden;\n    }\n\n    &--bottom {\n      @include font-style('body--xs', 'body--m');\n    }\n\n    &--profile {\n      z-index: 0;\n    }\n\n    &.cards__item {\n      min-height: unset;\n    }\n  }\n\n  @include viewport--l {\n    grid-template-columns: repeat(4, grid-columns(3, 12));\n    grid-gap: $spacing--xl grid-gutter('l');\n  }\n\n  @media only screen and (min-width: 941px) and (max-width: 1280px) {\n    .dashboard-card--profile .dashboard-card--middle {\n      margin: 25px 0;\n    }\n  }\n\n  @include viewport--xl {\n    .dashboard-card--profile {\n      .dashboard-card--middle {\n        //todo: delete when TW is live\n        margin: 25px 0 10px;\n      }\n\n      .rating-readonly,\n      .rating-readonly__icon--wrapper,\n      .icon--filled {\n        height: $spacing--m;\n      }\n\n      .rating-readonly.rating--m {\n        .rating-readonly__icon--wrapper,\n        .icon--filled:before {\n          width: 160px;\n        }\n      }\n\n      .icon--filled {\n        background-size: 40px 30px;\n\n        &:before {\n          background-size: 40px 30px;\n          width: 160px;\n        }\n      }\n\n      .dashboard-card--bottom {\n        //todo: delete when TW is live\n        padding-top: $spacing--s;\n      }\n    }\n  }\n}\n\n// background mappings\n@include indicators-rating-readonly-background-mapping;\n@include my-environment-bg-map;\n","@function grid-gutter($viewport: 's') {\n  // viewport s\n  @if ($viewport == 's') {\n    @return calc((#{$grid-gutter-units}/#{$grid-units-total--s}) * 100%);\n  }\n  // viewport l\n  @else if ($viewport == 'l') {\n    @return calc((#{$grid-gutter-units}/#{$grid-units-total--l}) * 100%);\n  }\n}\n","// baseline size, used for every calculation\n$baseline: 10px;\n\n// border radius\n$border-radius: 4px;\n$border-radius--s: 3px;\n$border-radius--xs: 2px;\n$border-radius--m: 5px;\n$border-radius--m-l: 6px;\n$border-radius--l: 8px;\n$border-radius--max: 30px;\n","// dynamic\n@mixin indicators-rating-dynamic-background-mapping {\n  .ratings {\n    svg {\n      fill: currentColor;\n    }\n    label {\n      color: $color-brand--one;\n      cursor: pointer;\n    }\n    input:checked ~ label {\n      color: $color-alpha--two-10;\n    }\n    input:checked + label svg {\n      color: $color-brand--one;\n      border: 2px solid $color-brand--one;\n      border-radius: 3px;\n    }\n    :hover input + label {\n      color: $color-brand--one;\n    }\n    input:hover ~ label, \n    input:focus ~ label {\n      color: $color-alpha--two-10;  \n    }\n    input:hover + label,\n    input:focus + label {\n      color: $color-brand--one;\n    }\n  }\n}\n\n\n// readonly\n@mixin indicators-rating-readonly-background-mapping {\n  .bg-brand--light-grey {\n    .icon--filled {\n      @include svg-base64('star-filled-30', $color-brand--one);\n    }\n\n    .icon--filled:before {\n      @include svg-base64('star-filled-30', $color-brand--white);\n      // convert white to black since alpha color is not possible\n      // here and black color is not in palette for all themes\n      filter: invert(100%);\n      opacity: 0.1;\n    }\n  }\n}","// @svg-base64($icon, $color)\n\n@mixin svg-base64($icon, $color) {\n  // remove the hexadecimal character from string\n  $color-clean: str-replace('#{$color}', '#', '');\n\n  @if ($icon == 'add') {\n    content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='20' height='20' fill='%23#{$color-clean}'%3E%3Cpath d='M18 9h-7V2a1 1 0 1 0-2 0v7H2a1 1 0 1 0 0 2h7v7a1 1 0 1 0 2 0v-7h7a1 1 0 1 0 0-2'/%3E%3C/svg%3E%0A\");\n  }\n\n  @if ($icon == 'check') {\n    content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='20' height='20' fill='%23#{$color-clean}'%3E%3Cpath d='M7.6472,15.999 C7.3972,15.999 7.1462,15.905 6.9532,15.719 L1.3052,10.265 C0.9082,9.881 0.8972,9.247 1.2802,8.851 C1.6652,8.454 2.2982,8.441 2.6942,8.825 L7.6472,13.608 L17.3052,4.279 C17.7022,3.898 18.3362,3.907 18.7192,4.305 C19.1022,4.701 19.0912,5.335 18.6942,5.719 L8.3412,15.719 C8.1482,15.905 7.8972,15.999 7.6472,15.999'/%3E%3C/svg%3E%0A\");\n  }\n\n  @if ($icon == 'chevron-right-8') {\n    content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' width='8' height='8' fill='%23#{$color-clean}'%3E%3Cpath d='M2.50025,0 C2.75625,0 3.01225,0.098 3.20725,0.293 L6.20725,3.293 C6.59825,3.684 6.59825,4.316 6.20725,4.707 L3.20725,7.707 C2.81625,8.098 2.18425,8.098 1.79325,7.707 C1.40225,7.316 1.40225,6.684 1.79325,6.293 L4.08625,4 L1.79325,1.707 C1.40225,1.316 1.40225,0.684 1.79325,0.293 C1.98825,0.098 2.24425,0 2.50025,0'/%3E%3C/svg%3E%0A\");\n  }\n\n  @if ($icon == 'chevron-left-8') {\n    content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' width='8' height='8' fill='%23#{$color-clean}'%3E%3Cpath d='M5.5,8 C5.244,8 4.988,7.902 4.793,7.707 L1.793,4.707 C1.402,4.316 1.402,3.684 1.793,3.293 L4.793,0.293 C5.184,-0.098 5.816,-0.098 6.207,0.293 C6.598,0.684 6.598,1.316 6.207,1.707 L3.914,4 L6.207,6.293 C6.598,6.684 6.598,7.316 6.207,7.707 C6.012,7.902 5.756,8 5.5,8'/%3E%3C/svg%3E%0A\");\n  }\n\n  @if ($icon == 'arrow-right-30') {\n    content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' width='30' height='30' fill='%23#{$color-clean}'%3E%3Cpath d='M3,15.8965 L24.605,15.8965 L17.29,23.2975 C16.901,23.6905 16.905,24.3235 17.298,24.7125 C17.691,25.1005 18.324,25.0965 18.712,24.7045 L27.711,15.5995 C28.1,15.2065 28.096,14.5735 27.703,14.1855 L18.704,5.2895 C18.509,5.0965 18.255,5.0005 18.001,5.0005 C17.743,5.0005 17.485,5.0995 17.29,5.2965 C16.901,5.6895 16.905,6.3225 17.298,6.7105 L24.566,13.8965 L3,13.8965 C2.447,13.8965 2,14.3445 2,14.8965 C2,15.4485 2.447,15.8965 3,15.8965'/%3E%3C/svg%3E%0A\");\n  }\n\n  @if ($icon == 'minus') {\n    content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='20' height='20' fill='%23#{$color-clean}'%3E%3Cpath d='M18 11H2a1 1 0 1 1 0-2h16a1 1 0 1 1 0 2'/%3E%3C/svg%3E%0A\");\n  }\n\n  @if ($icon == 'star-filled-30') {\n    background: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 5 45 20' width='30' height='20' fill='%23#{$color-clean}'%3E%3Cpath d='M29.951 10.817a1.002 1.002 0 00-.808-.68l-9.153-1.33L15.896.511c-.336-.683-1.457-.683-1.793 0L10.01 8.806l-9.154 1.33a1 1 0 00-.554 1.706L6.926 18.3l-1.564 9.117a1 1 0 001.451 1.054L15 24.167l8.186 4.304a1.006 1.006 0 001.054-.076 1 1 0 00.398-.978L23.074 18.3l6.624-6.458a1 1 0 00.253-1.025'/%3E%3C/svg%3E%0A\");\n  }\n}\n\n@mixin svgMask($icon) {\n  @if ($icon == 'check') {\n    mask-repeat: no-repeat;\n    mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='20' height='20' %3E%3Cpath d='M7.6472,15.999 C7.3972,15.999 7.1462,15.905 6.9532,15.719 L1.3052,10.265 C0.9082,9.881 0.8972,9.247 1.2802,8.851 C1.6652,8.454 2.2982,8.441 2.6942,8.825 L7.6472,13.608 L17.3052,4.279 C17.7022,3.898 18.3362,3.907 18.7192,4.305 C19.1022,4.701 19.0912,5.335 18.6942,5.719 L8.3412,15.719 C8.1482,15.905 7.8972,15.999 7.6472,15.999'/%3E%3C/svg%3E%0A\");\n  }\n\n  @if ($icon == 'chevron-left-8') {\n    mask-image: url(\"data:image/svg+xml,%3Csvg id='chevron-left-8' viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5,8 C5.244,8 4.988,7.902 4.793,7.707 L1.793,4.707 C1.402,4.316 1.402,3.684 1.793,3.293 L4.793,0.293 C5.184,-0.098 5.816,-0.098 6.207,0.293 C6.598,0.684 6.598,1.316 6.207,1.707 L3.914,4 L6.207,6.293 C6.598,6.684 6.598,7.316 6.207,7.707 C6.012,7.902 5.756,8 5.5,8'/%3E%3C/svg%3E%0A\");\n  }\n\n  @if ($icon == 'chevron-right-8') {\n    mask-image: url(\"data:image/svg+xml,%3Csvg id='chevron-right-8' viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.50025,0 C2.75625,0 3.01225,0.098 3.20725,0.293 L6.20725,3.293 C6.59825,3.684 6.59825,4.316 6.20725,4.707 L3.20725,7.707 C2.81625,8.098 2.18425,8.098 1.79325,7.707 C1.40225,7.316 1.40225,6.684 1.79325,6.293 L4.08625,4 L1.79325,1.707 C1.40225,1.316 1.40225,0.684 1.79325,0.293 C1.98825,0.098 2.24425,0 2.50025,0'/%3E%3C/svg%3E%0A\");\n  }\n}\n",".my-environment-header {\n  display: flex;\n  justify-content: space-between;\n\n   &__title {\n    &--ml {\n      //title in job alerts\n      @include font-style('title--xs', 'title--s');\n    }\n\n    &--m {\n      //title in list/profile items\n      @include font-style('title--xs', 'title--xs');\n    }\n\n    &--s {\n      // title in card\n      @include font-style('title--xxs', 'title--xs');\n    }\n  }\n}\n\n.my-environment-action-header {\n\n  &__title {\n  // title with + button under it & above a container item\n    @include font-style('title--s' , 'title--s');\n  }\n\n  // center view-more button under action header (should be possible with header-only situation)\n  ~.view-more-button {\n    display: flex;\n    justify-content: center;\n  }\n\n  // remove margin-top from button if only header & button are visible\n  +.view-more-button .button {\n    margin-top: unset;\n  }\n}\n\n.my-environment-container h1 {\n  @include font-style('title--s', 'title--l');\n}\n\n@include my-environment-bg-map;\n",".my-environment-item {\n\n  &__description {\n    @include font-style('body--m', 'body--m');\n\n    &.body-copy li {\n      padding-left: 25px; // specificity body copy too high for utility class\n\n      &:before {\n        margin-left: -25px;\n        min-width: 25px;\n      }\n\n      +li {\n        margin-top: $spacing--xxs; // specificity body copy too high for utility class\n      }\n    }\n  }\n\n  &__content--cta,\n  &__description {\n    display: flex;\n    flex-direction: column;\n\n    a {\n      max-width: max-content;\n    }\n  }\n\n  @include viewport--l {\n\n    &__content {\n\n      &--cta {\n        flex-direction: row;\n        justify-content: space-between;\n\n        a {\n          align-self: flex-end;\n        }\n      }\n    }\n  }\n}\n\n// TEMP Design for Popover large My Environment until ME Nav is final\n// relocate :before element because of missing language toggle in ME\n\n.navigation.my-environment .popover:before {\n\n@include viewport--m {\n  right: 80px;\n}\n\n@include viewport--l {\n  right: 20px;\n}\n\n@include viewport--xl {\n  right: 60px;\n}\n}\n",".my-environment-item__list {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n\n  &-title {\n    @include text-ellipsis;\n    align-self: stretch;\n    width: calc(100% - 65px); //allows for controls to fit in different flex orders\n  }\n\n  &-content {\n    order: 4;\n    width: 100%;\n  }\n\n  .my-environment-header +& {\n    margin-top: 20px;\n  }\n\n  &.closable--closed,\n  &.closable--closed > * {\n    margin: 0;\n    padding: 0;\n    border: 0 solid transparent;\n    transition: max-height $transition-duration $transition-duration,\n      padding $transition-duration $transition-duration,\n      margin $transition-duration $transition-duration;\n  }\n\n  @include viewport--l {\n    flex-wrap: nowrap;\n\n    &-details {\n      padding-top: 0;\n\n      &:not(last-of-type) {\n        padding-bottom: 0;\n      }\n    }\n\n    &-title {\n      width: calc((17/43) * 100%);\n    }\n\n    &-content {\n      margin-top: unset;\n      order: 2;\n      width: calc((20/43) * 100%)\n    }\n\n    // regulate space between free header and first list item.\n    .my-environment-header +& {\n      margin-top: $spacing--m;\n    }\n\n    + .my-environment-container {\n      padding-top: $spacing--s;\n    }\n  }\n}\n","// @text-ellipsis($width, $display)\n\n@mixin text-ellipsis($width: 100%, $display: inline-block) {\n  display: $display;\n  max-width: $width;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n","$transition-duration--faster: 0.1s;\n$transition-duration--fast: 0.2s;\n$transition-duration: 0.3s;\n$transition-duration--slow: 0.5s;\n$transition-duration--slower: 0.7s;\n$transition-duration--slowest: 0.9s;\n",".my-environment-item__card {\n  border-radius: $border-radius--l;\n  max-height: unset; // for closable animation\n  visibility: visible; // for closable animation\n  opacity: 1;\n}\n\n@include my-environment-bg-map;\n"]}