// Import all the tools needed to customize the theme and extract parts of it
// @import '~@angular/material/core/theming/all-theme';
@import '../../all-theme';

// Define a mixin that accepts a theme and outputs the color styles for the component.
@mixin ap-icon-theme($theme) {
  // Extract whichever individual palettes you need from the theme.
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);

  [ap-icon] {
    font-family: agorapulse;
  }

  [ap-social-icon] {
    background-size: 100%;
    &.facebook {
      background-image: url($assets-path + "icons/facebook-icon.png");
    }
    &.instagram {
      background-image: url($assets-path + "icons/instagram-icon.png");
    }
    &.twitter {
      background-image: url($assets-path + "icons/twitter-icon.png");
    }
    &.linkedin {
      background-image: url($assets-path + "icons/linkedin-icon.png");
    }
    &.pinterest {
      background-image: url($assets-path + "icons/pinterest-icon.png");
    }
    &.google {
      background-image: url($assets-path + "icons/google-icon.png");
    }
    &.youtube {
      background-image: url($assets-path + "icons/youtube-icon.png");
    }
    &.button {
      filter: none;
      -webkit-filter: grayscale(100%);
      -moz-filter:    grayscale(100%);
      -ms-filter:     grayscale(100%);
      -o-filter:      grayscale(100%);
      opacity: 0.5;
      &:hover{
        -webkit-filter: grayscale(0);
        -moz-filter:    grayscale(0);
        -ms-filter:     grayscale(0);
        -o-filter:      grayscale(0);
      }
    }
  }

  .social-icons {
    display: flex;
    justify-content: center;
    [ap-social-icon] {
      width: 20px;
      height: 20px;
      margin: 0 10px;
    }
  }

}