// Correct overflow not hidden in IE 9/10/11.
svg:not(:root) {
  overflow: hidden;
}

.pictogram {
  width: $margin-double;
  height: $margin-double;
  vertical-align: -.15em;
  flex-shrink: 0;

  use {
    width: 100%;
    height: 100%;
  }

  &-facebook {
    color: $color-facebook;
  }

  &-google {
    color: $color-google;
  }

  &-instagram {
    color: $color-instagram;
  }

  &-linkedin {
    color: $color-linkedin;
  }

  &-pinterest {
    color: $color-pinterest;
  }

  &-twitter {
    color: $color-twitter;
  }

  &-whatsapp {
    color: $color-whatsapp;
  }

  &-youtube {
    color: $color-youtube;
  }

  &-tui,
  &-tui-logo,
  &-tui-smile-tui,
  &-tui-smile,
  &-tui-appicon {
    color: $color-red-400;
  }

  &-tui-appicon {
    background: $color-blue-300;
    border-radius: 4%;
  }

  &.right {
    transform: rotate(90deg);

    &.up {
      transform: rotate(45deg);
    }

    &.down {
      transform: rotate(135deg);
    }
  }

  &.down {
    transform: rotate(180deg);
  }

  &.left {
    transform: rotate(270deg);

    &.up {
      transform: rotate(315deg);
    }

    &.down {
      transform: rotate(225deg);
    }
  }
}

.icon-superlativ {
  background-image: url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjE3MiIgdmlld0JveD0iMCAwIDE3MiAxNzIiIHdpZHRoPSIxNzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTg2IDE2My4zMzg5NC0xMS4yMjUyNTI1IDcuOTI1MzE4LTguNzkxNTM4MS0xMC41NjA1NzgtMTIuODkzOTg0NiA0Ljc0OTk2LTUuNzU4Njk0OC0xMi40NzYxNTMtMTMuNjg0MDEyOSAxLjI1MDktMi4zMzM0MDYtMTMuNTQxNDk4LTEzLjU0MTQ5ODQtMi4zMzM0MDYgMS4yNTA5MDA2LTEzLjY4NDAxMy0xMi40NzYxNTMxLTUuNzU4Njk1IDQuNzQ5OTYwMy0xMi44OTM5ODQtMTAuNTYwNTc4NTgtOC43OTE1Mzg1IDcuOTI1MzE4MDgtMTEuMjI1MjUyNS03LjkyNTMxODA4LTExLjIyNTI1MjUgMTAuNTYwNTc4NTgtOC43OTE1MzgxLTQuNzQ5OTYwMy0xMi44OTM5ODQ2IDEyLjQ3NjE1MzEtNS43NTg2OTQ4LTEuMjUwOTAwNi0xMy42ODQwMTI5IDEzLjU0MTQ5ODQtMi4zMzM0MDYgMi4zMzM0MDYtMTMuNTQxNDk4NCAxMy42ODQwMTI5IDEuMjUwOTAwNiA1Ljc1ODY5NDgtMTIuNDc2MTUzMSAxMi44OTM5ODQ2IDQuNzQ5OTYwMyA4Ljc5MTUzODEtMTAuNTYwNTc4NTggMTEuMjI1MjUyNSA3LjkyNTMxODA4IDExLjIyNTI1MjUtNy45MjUzMTgwOCA4Ljc5MTUzODUgMTAuNTYwNTc4NTggMTIuODkzOTg0LTQuNzQ5OTYwMyA1Ljc1ODY5NSAxMi40NzYxNTMxIDEzLjY4NDAxMy0xLjI1MDkwMDYgMi4zMzM0MDYgMTMuNTQxNDk4NCAxMy41NDE0OTggMi4zMzM0MDYtMS4yNTA5IDEzLjY4NDAxMjkgMTIuNDc2MTUzIDUuNzU4Njk0OC00Ljc0OTk2IDEyLjg5Mzk4NDYgMTAuNTYwNTc4IDguNzkxNTM4MS03LjkyNTMxOCAxMS4yMjUyNTI1IDcuOTI1MzE4IDExLjIyNTI1MjUtMTAuNTYwNTc4IDguNzkxNTM4NSA0Ljc0OTk2IDEyLjg5Mzk4NC0xMi40NzYxNTMgNS43NTg2OTUgMS4yNTA5IDEzLjY4NDAxMy0xMy41NDE0OTggMi4zMzM0MDYtMi4zMzM0MDYgMTMuNTQxNDk4LTEzLjY4NDAxMy0xLjI1MDktNS43NTg2OTUgMTIuNDc2MTUzLTEyLjg5Mzk4NC00Ljc0OTk2LTguNzkxNTM4NSAxMC41NjA1Nzh6IiBmaWxsPSIjZmExMTE5IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=');
  background-size: 100%;
  color: $color-white;
  display: inline-flex;
  width: 1.6em;
  height: 1.6em;
  text-align: center;
  justify-content: center;
  align-items: center;
  vertical-align: -.2em;

  .pictogram {
    height: 1em;
    width: 1em;
  }

  + .text {
    font-size: inherit;
    color: $color-red-400;
    font-weight: bold;
  }
}

.icon-svg-superlativ {
  display: inline-block;
}

.climate-notification {
  @include font-size(12);
  display: inline-flex;
  align-items: center;
  background-color: $color-climate-secondary;
  color: $color-climate-green;
  border-radius: $border-radius-double;
  height: 24px;

  .icon-climate {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: $color-climate-green;
    color: $color-white;
    border-radius: 100%;
    width: 24px;
    height: 24px;

    .pictogram-climate {
      width: 18px;
      height: 18px;
    }
  }

  .text {
    padding: 0 $margin-normal 0 9px;
    font-weight: bold;
  }

  @include breakpoint(sm) {
    height: 36px;
    border-radius: 18px;
    @include font-size(14);

    .icon-climate {
      height: 36px;
      width: 36px;

      .pictogram-climate {
        width: 24px;
        height: 24px;
      }
    }

    .text {
      padding: 0 $margin-enterprise 0 $margin-normal;
    }
  }

  &.tab {
    background-color: #fff;
    color: $color-white;
    padding-left: 2px;
    height: 24px;

    .icon-climate {
      border-radius: $margin-half 0 0 0;
      width: 24px;
      height: 24px;
      padding: 2px $margin-third;
    }

    .text {
      border-radius: 0 $margin-half 0 0;
      padding: $margin-quarter 9px $margin-quarter   0;
      background-color: $color-climate-green;
    }
  }
}