@use '../../sass/abstracts/variables';

@mixin backgroundImage($name) {
  &--#{$name} {
    -webkit-mask: url(../../images/icons/#{$name}.svg) no-repeat center;
    mask: url(../../images/icons/#{$name}.svg) no-repeat center;
    background-size: 100%;
    mask-size: contain;
  }

  &:hover {
    filter: brightness(85%);
  }
}

#{variables.$component-prefix}social {
  margin: 0 !important;
  margin-top: 0.25rem !important;

  &__item {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.25rem;
    display: inline-block;
    text-indent: -9999px;
    background-color: variables.$white; // Default color

    &--opacity {
      opacity: 0.5;
    }

    @include backgroundImage('facebook');
    @include backgroundImage('youtube');
    @include backgroundImage('twitter');
    @include backgroundImage('x-twitter');
    @include backgroundImage('instagram');
    @include backgroundImage('linkedin');
  }

  &--green a {
    background-color: variables.$sodra-green;
  }
}