@randstad-design/orbit-multitheme/dist/assets/theme-spherion/components/cards/job.css.map

multitheme Front-end code based on Randstad Human Forward components

{"version":3,"sources":["../scss/04_organisms/cards/_general.scss","00_helpers/mixins/_word-break.scss","../scss/00_tools/cssVartoSass.scss","00_helpers/variables/_sizing.scss","00_helpers/variables/_transitions.scss","00_helpers/variables/_cards.scss","00_helpers/variables/_spacing.scss","00_helpers/mixins/_font-style.scss","00_helpers/variables/_fonts.scss","00_helpers/mixins/_colors.scss","00_helpers/variables/_colors.scss","00_helpers/mixins/_media-queries.scss","00_helpers/variables/_icons.scss","00_helpers/mixins/grid/_grid-columns.scss","00_helpers/mixins/cards/_general.scss","../scss/04_organisms/notifications/_notice-in-page.scss","00_helpers/mixins/notifications/_notice-in-page.scss"],"names":[],"mappings":"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","file":"job.css","sourcesContent":[".cards {\n  // specific for format-carousel\n  &__list--format-carousel {\n    display: flex;\n  }\n\n  // item\n  &__item {\n    @include word-break;\n    background: returnColorCSSVar('brand-tertiary');\n    border: 2px solid transparent;\n    border-radius: $border-radius--l;\n    display: flex !important; // overwrite potential inline style set by slick slider\n    flex-direction: column;\n    height: 100%;\n    min-height: 290px;\n    padding: $cards-item-spacing-bottom-top + 2 $cards-item-spacing-left-right +\n      2; //add 2 px to fit in grid\n    position: relative;\n    transition: border $transition-duration, color $transition-duration;\n  }\n\n  img {\n    align-self: flex-start;\n    flex-shrink: 0; // prevent image stretch in ie\n    max-width: 100%;\n  }\n\n  &__list--format-list & {\n    img {\n      max-width: $cards-item-image-width;\n    }\n  }\n\n  // header\n  &__header {\n    display: flex;\n    justify-content: space-between;\n    gap: 10px;\n  }\n\n  &__logo-title-container {\n    width: 100%;\n\n    .notice-in-page {\n      margin-top: $spacing--s;\n      max-width: unset;\n    }\n  }\n\n  // logo\n  &__logo {\n    margin-bottom: $spacing--s;\n    max-width: $cards-logo-max-width;\n    width: 100%;\n\n    .cards__logo-image {\n      background-position-y: center;\n      background-repeat: no-repeat;\n      background-size: contain;\n      max-height: $cards-logo-image-height;\n    }\n  }\n\n  // title\n  &__title {\n    @include font-style($cards-title);\n    min-width: 0; // fix issues with word-break on flex items\n  }\n\n  // link\n  &__link {\n    color: returnColorCSSVar('brand-secondary');\n    text-decoration: none;\n    text-decoration-color: transparent;\n    &:hover {\n      text-decoration: none;\n    }\n\n    // &:focus {\n    //   outline: solid currentColor;\n    // }\n\n    .make-entire-card-clickable {\n      height: 100%;\n      left: 0;\n      position: absolute;\n      top: 0;\n      z-index: 1;\n      width: 100%;\n    }\n  }\n\n  &__description {\n    @include color-dark-shade-alternative;\n    display: none;\n    margin: $spacing--s 0;\n    max-height: $baseline * 8.6;\n    overflow: hidden;\n    padding-right: 100px;\n    text-overflow: ellipsis;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 3;\n  }\n\n  // icon toggler\n  .icon__toggler {\n    flex-shrink: 0;\n    margin-left: auto; // prevents svg from moving outside of parent\n    z-index: 2;\n\n    .icon {\n      @include color-dark-shade-alternative;\n    }\n\n    // prevent icon hover effect on touch devices\n    @media (hover: none) {\n      &:not(.icon__toggler--active):hover svg {\n        @include color-dark-shade-alternative;\n      }\n    }\n  }\n\n  // meta\n  &__meta {\n    @include font-style('body--m', 'body--l');\n    color: $color-brand--two;\n\n    &-item {\n      align-items: flex-start;\n      display: flex;\n      word-break: break-word;\n\n      & + & {\n        margin-top: $spacing--xxs;\n      }\n\n      .icon {\n        flex-shrink: 0;\n        margin-right: 15px;\n        margin-top: $baseline * 0.3;\n      }\n\n      &--link a {\n        white-space: pre-wrap; // fixes text behavior long words when meta items include a link\n      }\n    }\n  }\n\n  // card disabled\n  &__item--disabled {\n    .cards__title,\n    .cards__title a,\n    .cards__meta,\n    .cards__meta-item .icon,\n    .cards__date {\n      @include color-dark-shade-alternative;\n    }\n\n    .cards__info-wrapper,\n    .cards__backside-card,\n    .cards__backside-footer {\n      display: none;\n    }\n\n    .cards__link {\n      pointer-events: none;\n    }\n\n    .icon__toggler {\n      display: none;\n    }\n\n    .icon__toggler.icon__toggler--active {\n      display: block;\n    }\n  }\n\n  // footer\n  &__footer {\n    @include font-style('body--m', 'body--l');\n    display: flex;\n    justify-content: space-between;\n    margin-top: auto;\n  }\n\n  &__time-info {\n    display: flex;\n    flex-direction: column-reverse;\n    white-space: nowrap;\n  }\n\n  &__status-info {\n    @include font-style('body--m');\n  }\n\n  &__info-wrapper {\n    align-items: center;\n    background: transparent;\n    display: flex;\n    height: $baseline * 4;\n    justify-content: center;\n    margin-bottom: $baseline * -0.7;\n    margin-right: -5px;\n    width: $icon-size--xl;\n    z-index: 1;\n\n    .cards__info-button {\n      align-items: center;\n      display: flex;\n      justify-content: center;\n    }\n\n    &:hover {\n      cursor: pointer;\n    }\n  }\n\n  &__info-button {\n    .icon {\n      transition: color $transition-duration--fast;\n    }\n  }\n\n  &__expiration {\n    display: inline-block;\n  }\n\n  &__date,\n  &__expiration {\n    margin: $spacing--xxs $spacing--xxs 0 0;\n  }\n\n  // specific styling for the backside/overlay description when clicked on info-button\n  &__backside-card {\n    height: 0;\n    opacity: 0;\n\n    .cards__backside-description {\n      @include font-style('body--m');\n      bottom: -$spacing--s; //set for animation transition\n      display: block; /* Fallback for non-webkit */\n      display: -webkit-box;\n      height: 88%;\n      margin-bottom: 20px;\n      opacity: 0;\n      overflow: hidden;\n      pointer-events: none;\n      position: absolute;\n    }\n\n    .cards__backside-footer {\n      bottom: -$spacing--s; //set for animation transition\n      display: inline-flex;\n      opacity: 0;\n\n      &--horizontal {\n        @include font-style('body--m');\n        align-items: center;\n        display: flex;\n        text-decoration: none;\n        white-space: nowrap;\n      }\n\n      &--job-link {\n        margin-right: 30px;\n      }\n\n      &--close-backside {\n        opacity: 0;\n        visibility: hidden;\n      }\n\n      .button-text {\n        color: inherit;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n\n      .icon {\n        color: inherit;\n        margin-right: 10px;\n        top: $cards-backside-footer-icon-top;\n      }\n    }\n  }\n\n  // backside is active\n  li.cards__item--backside-active {\n    .cards__backside-card,\n    & {\n      height: 100%;\n      opacity: 1;\n    }\n\n    .cards__backside-description {\n      bottom: 0; //set for animation transition\n      hyphens: auto;\n      opacity: 1;\n      position: relative;\n      transition: opacity $transition-duration ease 100ms,\n        bottom $transition-duration;\n      visibility: visible;\n\n      &::before {\n        content: '';\n        height: 100%;\n        left: 0;\n        position: absolute;\n        top: 0;\n        width: 100%;\n      }\n    }\n\n    .cards__backside-footer {\n      bottom: 0; //set for animation transition\n      opacity: 1;\n      position: relative;\n      transition: opacity $transition-duration ease 100ms,\n        bottom $transition-duration;\n      visibility: visible;\n\n      &--close-backside {\n        cursor: pointer;\n        opacity: 1;\n        transition-duration: $transition-duration--faster;\n        visibility: visible;\n\n        &:hover {\n          transition-duration: $transition-duration--faster;\n        }\n      }\n    }\n\n    .cards__header,\n    .cards__meta,\n    .cards__footer,\n    .cards__title,\n    .cards__badge {\n      display: none;\n    }\n  }\n\n  //class set from cards.js to animate close backside, code is duplicated for purpose of animation (iow, the other class does not exist at the moment its active)\n  &__item--animate {\n    .cards__backside-card,\n    & {\n      animation: blueToOffWhite 300ms;\n      height: 100%;\n      opacity: 1;\n    }\n\n    .cards__backside-description {\n      bottom: 0; //set for animation transition\n      display: block; /* Fallback for non-webkit */\n      display: -webkit-box;\n      height: 88%;\n      margin-bottom: 20px;\n      opacity: 0;\n      overflow: hidden;\n      pointer-events: none;\n      position: relative;\n      transition: opacity $transition-duration--faster;\n      visibility: visible;\n\n      &::before {\n        content: '';\n        height: 100%;\n        left: 0;\n        position: absolute;\n        top: 0;\n        width: 100%;\n      }\n    }\n\n    .cards__backside-footer {\n      bottom: 0;\n      display: inline-flex;\n      opacity: 0;\n      position: relative;\n      transition: bottom $transition-duration--faster;\n      visibility: visible;\n\n      &--close-backside {\n        opacity: 0;\n\n        .icon {\n          margin-right: 0;\n        }\n      }\n    }\n\n    .cards__header,\n    .cards__meta,\n    .cards__footer,\n    .cards__title {\n      display: none !important; //overwrite is needed because animation class is set by js for 300ms to overrule display flex *card.js\n    }\n  }\n\n  // 'more' card overwrites\n  &__item--more {\n    border: none;\n    min-height: 200px;\n\n    .cards__link {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n    }\n\n    img {\n      margin: auto;\n    }\n\n    .button {\n      position: relative;\n      z-index: 1;\n    }\n\n    &-spherion {\n      justify-content: flex-end;\n      min-height: 300px;\n    }\n  }\n}\n\n// viewport s\n@include viewport--m('inversed') {\n  .cards {\n    padding: 0;\n\n    &__list {\n      //specific styling for carousel slider\n      &--format-carousel {\n        padding: 0 $grid-margin--s;\n      }\n\n      &--format-grid,\n      &--format-list {\n        .cards__item {\n          border-radius: 0;\n        }\n      }\n    }\n\n    .cards__backside-footer {\n      justify-content: space-between;\n      width: 100%;\n    }\n\n    .button-text {\n      display: none;\n    }\n  }\n  .cards__backside-card {\n    .cards__backside-description {\n      height: 84%;\n    }\n  }\n}\n\n// viewport m only\n@include viewport--m('range') {\n  .cards {\n    padding: 0 $grid-margin--m;\n\n    &__item--more {\n      img {\n        max-width: $cards-item-image-width;\n      }\n    }\n  }\n  .cards__backside-card {\n    .cards__backside-description {\n      height: 86%;\n    }\n  }\n}\n\n@include viewport--l('range') {\n  .cards__backside-footer {\n    justify-content: space-between;\n    width: 100%;\n  }\n\n  .button-text {\n    display: none;\n  }\n}\n\n// viewport m l\n@include viewport--m() {\n  .cards {\n    li.cards__item--backside-active .cards__backside-footer {\n      bottom: $spacing--xs;\n      max-width: 220px;\n    }\n\n    &__item--animate {\n      .cards__backside-footer {\n        bottom: $spacing--xs;\n      }\n    }\n  }\n}\n\n// viewport s - m\n@include viewport--l('inversed') {\n  .cards {\n    &__list.slick-slider {\n      width: grid-columns(5, 6);\n    }\n\n    &__list {\n      &--format-grid {\n        .cards__item {\n          margin-bottom: $spacing--xxs;\n        }\n      }\n\n      &--format-list {\n        .cards__item {\n          margin-bottom: $spacing--xs;\n        }\n      }\n    }\n\n    &__meta {\n      margin-bottom: $baseline * 1.5;\n      margin-top: $spacing--s;\n    }\n\n    // slick slider\n    .slick {\n      &-list {\n        overflow: visible;\n      }\n\n      &-track {\n        display: flex !important; // overwrite inline values set by slick slider\n      }\n\n      &-slide {\n        float: none;\n        height: inherit;\n\n        > div {\n          height: 100%;\n        }\n      }\n    }\n\n    // styling for cards carousel prior to slick init\n    // this will minimize content jumps\n    &__list:not(.slick-slider) {\n      width: 100%;\n\n      // item\n      .cards__item {\n        .cards__list--format-carousel & {\n          flex-shrink: 0;\n          height: auto;\n          width: grid-columns(5, 6);\n\n          &:not(:first-child) {\n            margin-left: 6vw;\n          }\n        }\n      }\n    }\n  }\n}\n\n// viewport l\n@include viewport--l {\n  .cards {\n    // meta\n    &__meta {\n      margin-top: $spacing--s;\n\n      .cards__meta-item:last-child {\n        margin-bottom: ($spacing--xs);\n      }\n    }\n\n    // list\n    &__list {\n      display: flex;\n      flex-wrap: wrap;\n      justify-content: space-between;\n      width: 100%;\n\n      &::after {\n        content: '';\n        display: block;\n      }\n\n      &::after,\n      .cards__item {\n        margin-bottom: $spacing--m; // margin bottom used because of IE11 (instead of grid-gap)\n        width: grid-columns(4, 12);\n      }\n\n      // if supported use grid\n      @supports (display: grid) {\n        display: grid;\n        grid-template-columns: repeat(3, grid-columns(4, 12));\n\n        & {\n          margin-bottom: $spacing--xxs;\n        }\n\n        &--halves {\n          grid-template-columns: repeat(2, grid-columns(6, 12));\n        }\n\n        &--quarters {\n          grid-template-columns: repeat(4, grid-columns(3, 12));\n          grid-row-gap: 40px;\n        }\n\n        .cards__item {\n          width: auto;\n\n          &:not(:first-child) {\n            margin-left: 0;\n          }\n        }\n        &::after {\n          content: '';\n          display: none;\n        }\n      }\n\n      // li.cards__item--backside-active .cards__backside-footer {\n      //   .icon {\n      //     top: $cards-list-backside-footer-icon-top;\n      //   }\n      // }\n\n      &--format-grid,\n      &--format-carousel {\n        .cards__meta {\n          @include font-style('body--m');\n          display: flex;\n          flex-direction: column;\n          justify-content: space-evenly;\n        }\n\n        .cards__date {\n          @include font-style('body--m');\n        }\n      }\n\n      // styling specific for display as a list\n      &--format-list {\n        &::after,\n        .cards__item {\n          margin-bottom: $spacing--s;\n          width: 100%;\n        }\n\n        @supports (display: grid) {\n          display: grid;\n          grid-template-columns: repeat(1, grid-columns(12, 12));\n        }\n\n        .cards__title {\n          @include font-style($cards-title--l, $cards-title--l);\n        }\n\n        .cards__meta {\n          display: flex;\n          flex-flow: wrap;\n          margin-top: $baseline * 3;\n        }\n\n        .cards__meta-item {\n          align-items: center;\n          margin-right: $spacing--m;\n          margin-top: 0;\n\n          &:last-child {\n            margin-bottom: 0;\n          }\n\n          .icon {\n            margin: 0 $spacing--xs 0 0;\n            cursor: pointer;\n            z-index: 0;\n          }\n        }\n\n        .cards__description {\n          display: block;\n          display: -webkit-box;\n        }\n\n        .cards__footer {\n          display: block;\n\n          .cards__date {\n            @include font-style('body--l');\n            margin-right: $spacing--xs;\n          }\n        }\n\n        .cards__info-wrapper {\n          display: none;\n        }\n      }\n    }\n\n    // item\n    &__item {\n      flex-shrink: 0;\n      height: auto;\n      padding: $cards-item-spacing--l;\n      width: 100%;\n\n      // hover state for all cards except 'more' and 'disabled'\n      &:not(.cards__item--more):not(.cards__item--disabled):hover {\n        transition: border $transition-duration--fast;\n      }\n\n      // active state (set by JS) for all cards except 'more', 'disabled' and 'backside active'\n      &--active:not(.cards__item--more):not(.cards__item--backside-active):not(.cards__item--disabled) {\n        &,\n        &:hover,\n        &:focus {\n          transition: border $transition-duration--fast,\n            background-color $transition-duration--fast;\n        }\n      }\n    }\n  }\n}\n\n// viewport xl\n@include viewport--xl {\n  .cards {\n    &__list--format-grid {\n      .cards__item {\n        margin-bottom: $baseline * 4; // margin bottom used because of IE11 (instead of grid-gap)\n      }\n    }\n  }\n}\n\n// background mappings (was on top for cascading)\n@include cards-general-background-mapping;\n","@mixin word-break {\n  overflow-wrap: break-word;\n  word-wrap: break-word;\n}\n","// Returns CSS4 color variables\n@function returnColorCSSVar($color-name) {\n  @return var(--color-#{$color-name});\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","$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","// spacing\n$cards-item-spacing-left-right: 21px;\n$cards-item-spacing-bottom-top: $baseline * 2.4;\n$cards-item-spacing--l: $spacing--m;\n\n// sizes\n$cards-item-image-width: $baseline * 20;\n$cards-logo-max-width: $baseline * 10;\n$cards-logo-image-height: $baseline * 4;\n\n// titles\n$cards-title: 'title--xs-slim';\n$cards-title--l: 'title--s-slim';\n\n// back of card\n$cards-list-backside-footer-icon-top: 0;\n\n$cards-backside-footer-icon-top: 0;\n\n// event\n$cards-event-text-font-style: 'body--l';\n$cards-event-title-font-style: 'title--s-slim';\n$cards-event-title-font-style--l: 'title--s-slim';\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","// @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","@mixin color-dark-shade-main {\n  color: $color--two-50;\n  fill: $color--two-50;\n}\n\n@mixin color-dark-shade-alternative {\n  color: $color--two-50;\n  fill: $color--two-50;\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","// @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","// icons\n$icon-size: $baseline * 2;\n$icon-size--xs: $baseline * 0.8;\n$icon-size--s: $baseline * 1.6;\n$icon-size--l: $baseline * 3;\n$icon-size--xl: $baseline * 4;\n$icon-size--xxl: $baseline * 6;\n$icon-size--xxxl: $baseline * 12;\n","// @grid-columns($columns, $columns-total, $grid-gutter)\n\n// grid for viewport S & M:\n// 6 columns / 28 units\n//\n//  |   |   |   |   |   |   |   |   |   |   |   |\n//  | 3 | 2 | 3 | 2 | 3 | 2 | 3 | 2 | 3 | 2 | 3 |\n//  |   |   |   |   |   |   |   |   |   |   |   |\n//\n//\n// grid for vieport L:\n// 12 columns / 58 units\n//\n//  |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |\n//  | 3 | 2 | 3 | 2 | 3 | 2 | 3 | 2 | 3 | 2 | 3 | 2 | 3 | 2 | 3 | 2 | 3 | 2 | 3 | 2 | 3 | 2 | 3 |\n//  |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |\n\n@function grid-columns($columns, $columns-total, $grid-gutter: null) {\n  $column-gutter-diff: ($grid-column-units - $grid-gutter-units);\n\n  $column-units: ($columns * $grid-column-units) + (($columns - $column-gutter-diff) * $grid-gutter-units);\n  $columns-total: ($columns-total * $grid-column-units) + (($columns-total - $column-gutter-diff) * $grid-gutter-units);\n\n  // if grid gutter is provided use it in calculation\n  @if ($grid-gutter) {\n    @return calc(((#{$column-units} + (#{$grid-gutter} * #{$grid-gutter-units})) /#{$columns-total}) * 100%);\n  }\n  // if grid-gutter is not provided return default calculation\n  @else {\n    @return calc((#{$column-units}/#{$columns-total}) * 100%);\n  }\n}\n","@mixin cards-general-background-mapping {\n  .cards__item {\n    background: $color-brand--five;\n  }\n\n  .cards__title a {\n    color: $color-brand--three;\n  }\n\n  .cards__info-button:hover > .icon {\n    color: $color-brand--two;\n  }\n\n  .cards__item:not(.cards__item--more):not(.cards__item--disabled):hover {\n    border-color: $color-brand--three;\n  }\n\n  .cards__item--active:not(.cards__item--more):not(.cards__item--backside-active):not(.cards__item--disabled) {\n    &,\n    &:hover,\n    &:focus {\n      background-color: $color--one-light;\n      border-color: $color-brand--one;\n    }\n  }\n\n  .bg-brand--light-grey {\n    .cards__item {\n      background: $color-brand--white;\n    }\n  }\n\n  //backside\n\n  .cards__backside-description {\n    color: $color-brand--white;\n  }\n\n  a.cards__backside-footer--job-link {\n    color: $color-brand--white;\n  }\n\n  .cards__backside-footer--close-backside {\n    color: $color-alpha--four-50;\n\n    &:hover {\n      color: $color-brand--white;\n    }\n  }\n\n  .cards__item.cards__item--backside-active {\n    .cards__backside-card,\n    & {\n      background: $color-brand--three;\n    }\n\n    .cards__backside-description::before {\n      background: linear-gradient(\n        to bottom,\n        rgba($color-brand--three, 0),\n        80%,\n        rgba($color-brand--three, 100)\n      );\n    }\n  }\n\n  // icons\n\n  .cards__meta .icon,\n  .cards__info-button .icon {\n    @include color-dark-shade-alternative;\n  }\n\n  .icon__toggler {\n    .icon + .icon {\n      color: $color-brand--one;\n    }\n\n    &:hover svg {\n      fill: $color-brand--one\n    }\n  }\n\n  //more card\n  .cards__item.cards__item--more {\n    background: $color-brand--three;\n  }\n\n  .cards__item--more .button {\n    color: $color-brand--white;\n  }\n\n  //keyframes animation\n  @keyframes blueToOffWhite {\n    from {\n      background-color: $color-brand--three;\n    }\n    to {\n      background-color: $color-brand--five;\n    }\n  }\n\n  @keyframes blueToWhite {\n    from {\n      background-color: $color-brand--three;\n    }\n    to {\n      background-color: $color-brand--white;\n    }\n  }\n}\n\n\n",".notice-in-page {\n  border: 1px solid;\n  border-radius: $border-radius;\n  display: flex;\n  padding: $spacing--s;\n\n  @include viewport--l {\n    max-width: $baseline * 49;\n  }\n\n  .icon {\n    margin-right: $baseline * 1.5;\n    min-width: $baseline * 2;\n    padding-top: $baseline * 0.2;\n  }\n\n  &__body-copy {\n    @include font-style('body--m');\n  }\n\n  @include notice-in-page-bg-map;\n}\n","@mixin notice-in-page-bg-map {\n  &__body-copy {\n    color: $color-brand--two;\n\n    a {\n      color: $color-brand--one;\n      &:hover {\n        color: $color-brand--one;\n      }\n    }\n  }\n\n  &--negative {\n    background: $color--negative-5;\n    border-color: $color--negative;\n\n    .icon {\n      color: $color--negative;\n    }\n  }\n\n  &--positive {\n    background: $color--positive-5;\n    border-color: $color--positive;\n\n    .icon {\n      color: $color--positive;\n    }\n  }\n\n  &--informative {\n    background: $color--three-5;\n    border-color: $color-brand--three;\n\n    .icon {\n      color: $color-brand--three;\n    }\n  }\n\n  &--warning {\n    background: $color--warning-10;\n    border-color: $color--warning;\n\n    .icon {\n      color: $color--warning;\n    }\n  }\n\n}\n\n"]}