.sharing {
  padding: 0 $gutter;
  background: $bg_white;
  color: $color-accent-contrast;
  line-height: 45px;

  position: absolute;
  top: -45px - 1px;
  right: 0;
  left: 0;

  // Firefox verpatzt die Höhe, warum auch immer
  height: 45px;
  overflow: hidden;

  span {
    vertical-align: middle;

    &.wide {
      display: none;
    }

    @media screen and (min-width: $break_medium) {
      &.wide {
        display: inline;
      }

      &.mobile {
        display: none;
      }
    }
  }

  ul,
  li {
    display: inline-block;
  }

  li {
    padding: 0 7px;

    a {
      text-indent: -100em;
      overflow: hidden;
      display: inline-block;
      vertical-align: middle;

      &:focus,
      &:active {
        outline: 2px solid $color-accent-contrast;
      }
    }

    &.icon_mail a {
      @include svg_element(sprites-icon_mail);
    }

    &.icon_facebook a {
      @include svg_element(sprites-icon_facebook);
    }

    &.icon_messenger a {
      @include svg_element(sprites-icon_messenger);
    }

    &.icon_twitter a {
      @include svg_element(sprites-icon_twitter);
    }

    &.icon_whatsapp a {
      @include svg_element(sprites-icon_whatsapp);
    }
  }

  @media screen and (min-width: 500px) {
    left: auto;
  }
}