ihk24/storybook/stories/_global/styles/_mixins.scss

@mixin h1 {
  font-family: var(--font-korb);
  font-size: var(--font-size-h1);
  line-height: 1.1;
  font-weight: 400;
  margin: 0.6em -0.05em 0.5em;

  &:first-child {
    margin-top: -0.1em;
  }
}

@mixin h2 {
  font-family: var(--font-korb);
  font-size: var(--font-size-h2);
  line-height: 1.2;
  font-weight: 400;
  margin: 1.4em -0.05em 0.6em;
}

@mixin h3 {
  font-family: var(--font-korb);
  font-size: var(--font-size-h3);
  line-height: 1.2;
  font-weight: 400;
  margin: 1.4em -0.05em 0.6em;
}

@mixin h4 {
  font-family: var(--font-korb);
  font-size: var(--font-size-h4);
  font-style: normal;
  font-weight: normal;
  line-height: 1.2;
  margin: 1.4em -0.05em 0.8em;
}

@mixin h5 {

}

@mixin h6 {
  font-size: inherit;
  line-height: 1.4;
  font-weight: 600;
  margin: 1.2em 0 0.5em;
}

@mixin kicker {
  display: block;
  font-size: 16px;
  text-transform: uppercase;
  margin-bottom: 2px;
  letter-spacing: 0.3px;

  @media(max-width: 767px) {
    font-size: 14px;
  }

  + h1 {
    margin-top: 0.1em;
  }

  + h2, + h3, + h4 {
    margin-top: 0.2em;
  }
}

@mixin hide($delay: 0s) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease $delay, visibility $delay ease 0.4s, transform 0.4s ease $delay;
}

@mixin show($delay: 0s) {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transition: opacity 0.4s ease $delay, visibility 0s ease $delay, transform 0.4s ease $delay;
}

@mixin full-size {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

@mixin copyright {
  position: absolute;
  display: block;
  left: 100%;
  bottom: 0;
  color: white;
  font-size: 12px;
  line-height: 1.2;
  text-shadow: 0 0 3px rgba(black, 0.6), 0 0 8px rgba(black, 0.6);
  z-index: 2;
  width: calc(66.6% + 7px);
  padding: 8px 18px;
  transform-origin: 0 100%;
  transform: rotate(-90deg);
}

@mixin form-field {
  --input-height: 60px;
  position: relative;
  display: block;
  width: 100%;
  height: var(--input-height);
  background-color: var(--theme-color-white);
  border: 1px solid var(--theme-color-primary);
  border-radius: var(--border-radius-xs);
  padding: 10px 15px;
  margin-bottom: 1.2em;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: var(--font-size-copy);
  line-height: 1.4;
  transition: 0.3s ease;
  color: var(--theme-color-primary);

  &:focus {
    box-shadow: 0 0 0 2px var(--theme-color-secondary-intensed), 0 0 8px 2px var(--theme-color-secondary-intensed);
    outline: 0;
  }

  @media(max-width: 1199px) {
    --input-height: 50px;
  }
  @media(max-width: 767px) {
    --input-height: 44px;
  }
}

@mixin focus-visible($inset: false) {
  @if $inset {
    &.focus-visible:focus {
      box-shadow: inset 0 0 0 2px var(--theme-color-secondary-intensed), inset 0 0 8px 2px var(--theme-color-secondary-intensed);
      outline: 0;
    }
    &:focus-visible, &.-moz-focusring {
      box-shadow: inset 0 0 0 2px var(--theme-color-secondary-intensed), inset 0 0 8px 2px var(--theme-color-secondary-intensed);
      outline: 0;
    }
  }
  @else {
    &.focus-visible:focus {
      box-shadow: 0 0 0 2px var(--theme-color-secondary-intensed), 0 0 8px 2px var(--theme-color-secondary-intensed);
      outline: 0;
    }
    &:focus-visible, &.-moz-focusring {
      box-shadow: 0 0 0 2px var(--theme-color-secondary-intensed), 0 0 8px 2px var(--theme-color-secondary-intensed);
      outline: 0;
    }
  }
}

@mixin focus-standalone($inset: false) {
  @if $inset {
    box-shadow: inset 0 0 0 2px var(--theme-color-secondary-intensed), inset 0 0 8px 2px var(--theme-color-secondary-intensed);
    outline: 0;
  }
  @else {
    box-shadow: 0 0 0 2px var(--theme-color-secondary-intensed), 0 0 8px 2px var(--theme-color-secondary-intensed);
    outline: 0;
  }
}

@mixin word-wrap() {
  word-break:     break-word;
  -webkit-hyphens: auto;
  -moz-hyphens:    auto;
  hyphens:         auto;
}

// ICONS
@mixin icon-ankerlink { content: '\e800'; }
@mixin icon-barrierefreiheit { content: '\e801'; }
@mixin icon-chat { content: '\e802'; }
@mixin icon-check { content: '\e803'; }
@mixin icon-checkbox-liste-1 { content: '\e804'; }
@mixin icon-content-schloss { content: '\e805'; }
@mixin icon-content { content: '\e807'; }
@mixin icon-dauer { content: '\e808'; }
@mixin icon-download { content: '\e809'; }
@mixin icon-dropdown { content: '\e80a'; }
@mixin icon-drucker { content: '\e80b'; }
@mixin icon-email { content: '\e80c'; }
@mixin icon-fax { content: '\e80d'; }
@mixin icon-freie-plaetze { content: '\e80e'; }
@mixin icon-galerie { content: '\e80f'; }
@mixin icon-gebaerdensprache { content: '\e810'; }
@mixin icon-geschlossen { content: '\e811'; }
@mixin icon-ihk-wechseln { content: '\e812'; }
@mixin icon-info { content: '\e813'; }
@mixin icon-kalender { content: '\e814'; }
@mixin icon-kartenpin { content: '\e815'; }
@mixin icon-kontakt { content: '\e816'; }
@mixin icon-laden { content: '\e817'; }
@mixin icon-leichte-sprache { content: '\e818'; }
@mixin icon-link-external { content: '\e819'; }
@mixin icon-liste-schloss { content: '\e81a'; }
@mixin icon-liste-stern { content: '\e81b'; }
@mixin icon-liste { content: '\e81c'; }
@mixin icon-loeschen { content: '\e81d'; }
@mixin icon-login { content: '\e81e'; }
@mixin icon-minus { content: '\e81f'; }
@mixin icon-pdf { content: '\e820'; }
@mixin icon-pfeil-links { content: '\e821'; }
@mixin icon-pfeil-oben { content: '\e822'; }
@mixin icon-pfeil-rechts-schloss { content: '\e823'; }
@mixin icon-pfeil-rechts-stern { content: '\e824'; }
@mixin icon-pfeil-rechts { content: '\e825'; }
@mixin icon-pfeil-simple-rechts { content: '\e826'; }
@mixin icon-pfeil-unten { content: '\e827'; }
@mixin icon-plus { content: '\e828'; }
@mixin icon-preis { content: '\e829'; }
@mixin icon-referent { content: '\e82a'; }
@mixin icon-reset { content: '\e82b'; }
@mixin icon-sanduhr { content: '\e82c'; }
@mixin icon-schliessen { content: '\e82d'; }
@mixin icon-schloss { content: '\e82e'; }
@mixin icon-sprache { content: '\e82f'; }
@mixin icon-stern { content: '\e830'; }
@mixin icon-suche-adresse { content: '\e831'; }
@mixin icon-suche-archiv { content: '\e832'; }
@mixin icon-suche-az { content: '\e833'; }
@mixin icon-suche-chat { content: '\e834'; }
@mixin icon-suche-datei { content: '\e835'; }
@mixin icon-suche-firma { content: '\e836'; }
@mixin icon-suche-magazin { content: '\e837'; }
@mixin icon-suche-mail { content: '\e838'; }
@mixin icon-suche-person { content: '\e839'; }
@mixin icon-suche-schloss { content: '\e83a'; }
@mixin icon-suche-veranstaltung { content: '\e83b'; }
@mixin icon-suche { content: '\e83c'; }
@mixin icon-teilnehmer-add { content: '\e83d'; }
@mixin icon-telefon { content: '\e83e'; }
@mixin icon-vcard { content: '\e83f'; }
@mixin icon-small-arrow-right-simple { content: '\e840'; }
@mixin icon-small-barrierefreiheit { content: '\e841'; }
@mixin icon-small-download { content: '\e842'; }
@mixin icon-small-gebaerdensprache { content: '\e843'; }
@mixin icon-small-kontakt { content: '\e844'; }
@mixin icon-small-leichte-sprache { content: '\e845'; }
@mixin icon-small-link-external { content: '\e846'; }
@mixin icon-small-login { content: '\e847'; }
@mixin icon-small-pfeil-rechts { content: '\e848'; }
@mixin icon-small-sprache { content: '\e849'; }
@mixin icon-small-schloss { content: '\e84a'; }
@mixin icon-small-stern { content: '\e84b'; }
@mixin icon-teilen { content: '\e84c'; }
@mixin icon-social-telegram { content: '\e84d'; }
@mixin icon-social-threema { content: '\e84e'; }
@mixin icon-social-whatsapp { content: '\e84f'; }
@mixin icon-suche-big { content: '\e850'; }
@mixin icon-xsmall-pin { content: '\e851'; }
@mixin icon-check-1 { content: '\e852'; }
@mixin icon-xsmall-euro { content: '\e853'; }
@mixin icon-xsmall-geschlossen { content: '\e854'; }
@mixin icon-xsmall-kalender { content: '\e855'; }
@mixin icon-xsmall-liste { content: '\e856'; }
@mixin icon-xsmall-offen { content: '\e857'; }
@mixin icon-xsmall-uhr { content: '\e858'; }
@mixin icon-social-facebook { content: '\e859'; }
@mixin icon-liste-1 { content: '\e85a'; }
@mixin icon-social-linkedin { content: '\e85b'; }
@mixin icon-social-pinterest { content: '\e85c'; }
@mixin icon-social_x { content: '\e85d'; }
@mixin icon-social-xing { content: '\e85e'; }
@mixin icon-zoom { content: '\e85f'; }
@mixin icon-social-youtube { content: '\e860'; }
@mixin icon-social-instagram { content: '\e861'; }
@mixin icon-faq { content: '\e869'; }
@mixin icon-checkbox-liste { content: '\e86a'; }
@mixin icon-content-stern { content: '\e86b'; }
@mixin icon-small-election-group { content: '\e86c'; }
@mixin icon-small-icon-election-location { content: '\e86e'; }
@mixin icon-userlike { content: '\e8c6'; }
@mixin icon-userlike-chat { content: '\e8c7'; }
@mixin icon-magazine { content: '\e8c8'; }
@mixin icon-lokalisierung { content: '\e8c9'; }
@mixin icon-login-flyout { content: '\e8ca'; }
@mixin icon-login-header { content: '\e8cb'; }
@mixin icon-social-twitter { content: '\e85d'; }

// PICTOGRAMS
@mixin pictogram-achtung { content: '\e800'; }
@mixin pictogram-achtung-strom { content: '\e801'; }
@mixin pictogram-aeskulapstab { content: '\e802'; }
@mixin pictogram-anker { content: '\e803'; }
@mixin pictogram-anstossen { content: '\e804'; }
@mixin pictogram-arbeitsplatz { content: '\e805'; }
@mixin pictogram-auktionshammer { content: '\e806'; }
@mixin pictogram-batterie { content: '\e807'; }
@mixin pictogram-ausruf { content: '\e808'; }
@mixin pictogram-bauhelm { content: '\e809'; }
@mixin pictogram-benefit-vorteil-geschenk { content: '\e80a'; }
@mixin pictogram-bett { content: '\e80b'; }
@mixin pictogram-blatt { content: '\e80c'; }
@mixin pictogram-blume { content: '\e80d'; }
@mixin pictogram-blume-b { content: '\e80e'; }
@mixin pictogram-brief { content: '\e80f'; }
@mixin pictogram-brille-auf-buch { content: '\e810'; }
@mixin pictogram-bueroklammer { content: '\e811'; }
@mixin pictogram-bus { content: '\e812'; }
@mixin pictogram-container { content: '\e813'; }
@mixin pictogram-containerschiff { content: '\e815'; }
@mixin pictogram-daumen-hoch-a { content: '\e816'; }
@mixin pictogram-daumen-hoch-c { content: '\e817'; }
@mixin pictogram-daumen-hoch-b { content: '\e818'; }
@mixin pictogram-diagramm-mit-text { content: '\e819'; }
@mixin pictogram-diagramm-torte { content: '\e81a'; }
@mixin pictogram-diagramm-verlust { content: '\e81b'; }
@mixin pictogram-diagramm-wachstum { content: '\e81c'; }
@mixin pictogram-diagramm { content: '\e81d'; }
@mixin pictogram-dokument-a { content: '\e81e'; }
@mixin pictogram-dokument-b { content: '\e81f'; }
@mixin pictogram-dokument-c { content: '\e820'; }
@mixin pictogram-e-auto { content: '\e821'; }
@mixin pictogram-e-learning { content: '\e822'; }
@mixin pictogram-einkaufstasche-mit-eurozeichen { content: '\e824'; }
@mixin pictogram-einkaufstasche { content: '\e825'; }
@mixin pictogram-einkaufswagen { content: '\e826'; }
@mixin pictogram-eu-emblem-brexit { content: '\e827'; }
@mixin pictogram-eu-emblem { content: '\e828'; }
@mixin pictogram-eule { content: '\e829'; }
@mixin pictogram-fabrik { content: '\e82a'; }
@mixin pictogram-fahne-horizontal-gestreift { content: '\e82b'; }
@mixin pictogram-fahne-kreuz { content: '\e82c'; }
@mixin pictogram-fahne-neutral { content: '\e82d'; }
@mixin pictogram-fahne-vertikal-gestreift { content: '\e82e'; }
@mixin pictogram-fahrrad-jobrad-dienstfahrrad { content: '\e82f'; }
@mixin pictogram-fahrrad-sportlich { content: '\e830'; }
@mixin pictogram-fahrrad { content: '\e831'; }
@mixin pictogram-faq-a { content: '\e832'; }
@mixin pictogram-faq-b { content: '\e833'; }
@mixin pictogram-fernglas { content: '\e834'; }
@mixin pictogram-fisch-frisst-fisch { content: '\e835'; }
@mixin pictogram-flugzeug { content: '\e836'; }
@mixin pictogram-frage { content: '\e837'; }
@mixin pictogram-fragezeichen { content: '\e838'; }
@mixin pictogram-geld-zuschuss-foerderung { content: '\e839'; }
@mixin pictogram-geldsack { content: '\e83a'; }
@mixin pictogram-freiheitsstatue { content: '\e83b'; }
@mixin pictogram-gruppe-gespraech { content: '\e83c'; }
@mixin pictogram-gruppe-idee { content: '\e83d'; }
@mixin pictogram-globus { content: '\e83e'; }
@mixin pictogram-gutschein-zuschuss-benefit { content: '\e83f'; }
@mixin pictogram-hand-a { content: '\e840'; }
@mixin pictogram-hand-b { content: '\e841'; }
@mixin pictogram-hand-c { content: '\e842'; }
@mixin pictogram-hand-geben { content: '\e843'; }
@mixin pictogram-hand-mit-werkzeug { content: '\e844'; }
@mixin pictogram-hand-gespreizt { content: '\e845'; }
@mixin pictogram-hand-zeigen-b { content: '\e846'; }
@mixin pictogram-hand-zeigen-a { content: '\e847'; }
@mixin pictogram-hand-zeigen-c { content: '\e848'; }
@mixin pictogram-handschlag-a { content: '\e849'; }
@mixin pictogram-handschlag-b { content: '\e84a'; }
@mixin pictogram-handschlag-c { content: '\e84b'; }
@mixin pictogram-heft { content: '\e84c'; }
@mixin pictogram-idee { content: '\e84d'; }
@mixin pictogram-ihk-chemnitz-a { content: '\e84e'; }
@mixin pictogram-ihk-chemnitz-b { content: '\e84f'; }
@mixin pictogram-ihk-chemnitz-c { content: '\e850'; }
@mixin pictogram-ihk-giessen-friedberg { content: '\e851'; }
@mixin pictogram-ihk-hagen { content: '\e852'; }
@mixin pictogram-ihk-heilbronn-franken { content: '\e853'; }
@mixin pictogram-ihk-köln { content: '\e854'; }
@mixin pictogram-ihk-rhein-neckar { content: '\e855'; }
@mixin pictogram-ihk-stuttgart { content: '\e856'; }
@mixin pictogram-ihk-wahl { content: '\e857'; }
@mixin pictogram-information { content: '\e858'; }
@mixin pictogram-kalender { content: '\e859'; }
@mixin pictogram-karte { content: '\e85a'; }
@mixin pictogram-koepfe-mit-sprechblase { content: '\e85b'; }
@mixin pictogram-kerze { content: '\e85c'; }
@mixin pictogram-kopf-mit-formel { content: '\e85d'; }
@mixin pictogram-kran { content: '\e85e'; }
@mixin pictogram-kuchen { content: '\e85f'; }
@mixin pictogram-labyrinth { content: '\e860'; }
@mixin pictogram-lkw { content: '\e861'; }
@mixin pictogram-maske { content: '\e862'; }
@mixin pictogram-megaphon { content: '\e863'; }
@mixin pictogram-mikrofon { content: '\e864'; }
@mixin pictogram-paket-mit-euro { content: '\e865'; }
@mixin pictogram-paket { content: '\e866'; }
@mixin pictogram-paragraph { content: '\e867'; }
@mixin pictogram-persoenliche_entwicklung { content: '\e868'; }
@mixin pictogram-person-an-tafel-a { content: '\e869'; }
@mixin pictogram-person-an-tafel-b { content: '\e86a'; }
@mixin pictogram-person-auf-schild { content: '\e86b'; }
@mixin pictogram-person-mit-brille-a { content: '\e86c'; }
@mixin pictogram-person-mit-brille-b { content: '\e86d'; }
@mixin pictogram-person-mit-buch { content: '\e86e'; }
@mixin pictogram-person-mit-doktorhut-a { content: '\e86f'; }
@mixin pictogram-person-mit-doktorhut-b { content: '\e870'; }
@mixin pictogram-person-mit-headset { content: '\e871'; }
@mixin pictogram-person-mit-uniform-a { content: '\e872'; }
@mixin pictogram-person-mit-uniform-b { content: '\e873'; }
@mixin pictogram-person { content: '\e874'; }
@mixin pictogram-personen-mit-brieftasche { content: '\e875'; }
@mixin pictogram-personen-mit-doktorhut { content: '\e876'; }
@mixin pictogram-personen-suche-a { content: '\e877'; }
@mixin pictogram-personen-suche-b { content: '\e878'; }
@mixin pictogram-pusteblume { content: '\e879'; }
@mixin pictogram-rakete-a { content: '\e87a'; }
@mixin pictogram-rakete-b { content: '\e87b'; }
@mixin pictogram-rednerpult { content: '\e87c'; }
@mixin pictogram-rettungsring { content: '\e87d'; }
@mixin pictogram-roboter { content: '\e87e'; }
@mixin pictogram-s-bahn { content: '\e87f'; }
@mixin pictogram-smilie { content: '\e880'; }
@mixin pictogram-social-facebook { content: '\e881'; }
@mixin pictogram-social-instagram { content: '\e882'; }
@mixin pictogram-social-linkedin { content: '\e883'; }
@mixin pictogram-social-twitter { content: '\e884'; }
@mixin pictogram-social-youtube { content: '\e885'; }
@mixin pictogram-solidaritaetsschleife { content: '\e886'; }
@mixin pictogram-stadt { content: '\e887'; }
@mixin pictogram-standort { content: '\e888'; }
@mixin pictogram-stern { content: '\e889'; }
@mixin pictogram-steuerung { content: '\e88a'; }
@mixin pictogram-stoppuhr { content: '\e88b'; }
@mixin pictogram-strommast { content: '\e88c'; }
@mixin pictogram-system-prozess { content: '\e88d'; }
@mixin pictogram-teamwork-team-zusammenarbeit { content: '\e88e'; }
@mixin pictogram-teller-besteck { content: '\e88f'; }
@mixin pictogram-treppe { content: '\e890'; }
@mixin pictogram-tropfen-a { content: '\e891'; }
@mixin pictogram-tropfen-b { content: '\e892'; }
@mixin pictogram-tulpe { content: '\e893'; }
@mixin pictogram-veranstaltung-intern-beruf { content: '\e894'; }
@mixin pictogram-veranstaltung-intern-feier { content: '\e895'; }
@mixin pictogram-videocall-a { content: '\e896'; }
@mixin pictogram-videocall-b { content: '\e897'; }
@mixin pictogram-videos { content: '\e898'; }
@mixin pictogram-virus { content: '\e899'; }
@mixin pictogram-waage { content: '\e89a'; }
@mixin pictogram-wegweiser-a { content: '\e89b'; }
@mixin pictogram-wegweiser-b { content: '\e89c'; }
@mixin pictogram-weltkugel-mit-flamme { content: '\e89d'; }
@mixin pictogram-weltkugel-mit-koffer { content: '\e89e'; }
@mixin pictogram-weltkugel { content: '\e89f'; }
@mixin pictogram-werkzeug { content: '\e8a0'; }
@mixin pictogram-windrad-a { content: '\e8a1'; }
@mixin pictogram-windrad-b { content: '\e8a2'; }
@mixin pictogram-wolke-mit-herz-und-sonne { content: '\e8a3'; }
@mixin pictogram-zeitung { content: '\e8a4'; }