import styled, { css } from 'styled-components'

import { IIcon } from './Icon.interface'

export const StyledIcon = styled.i<IIcon>`
  color: currentColor;
  font-size: 16px;
  line-height: 1;

  &::before {
    display: block;
    font-family: 'miewfont' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    webkit-font-smoothing: antialiased;
    moz-osx-font-smoothing: grayscale;
  }

  &.icon-twitter:before {
    content: "\\e90e";
  }
  &.icon-facebook:before {
    content: "\\e90f";
  }
  &.icon-google:before {
    content: "\\e910";
  }
  &.icon-whatsapp:before {
    content: "\\e911";
  }
  &.icon-youtube:before {
    content: "\\e912";
  }
  &.icon-instagram:before {
    content: "\\e913";
  }
  &.icon-less:before {
    content: "\\e914";
  }
  &.icon-linkedin:before {
    content: "\\e915";
  }
  &.icon-more:before {
    content: "\\e916";
  }
  &.icon-email:before {
    content: "\\e917";
  }
  &.icon-add:before {
    content: "\\e900";
  }
  &.icon-alert-circle-outline:before {
    content: "\\e901";
  }
  &.icon-trash:before {
    content: "\\e902";
  }
  &.icon-remove:before {
    content: "\\e903";
  }
  &.icon-pencil:before {
    content: "\\e904";
  }
  &.icon-book:before {
    content: "\\e905";
  }
  &.icon-close:before {
    content: "\\e906";
  }
  &.icon-arrow-up:before {
    content: "\\e907";
  }
  &.icon-arrow-down:before {
    content: "\\e908";
  }
  &.icon-arrow-back:before {
    content: "\\e909";
  }
  &.icon-arrow-forward:before {
    content: "\\e90a";
  }
  &.icon-search:before {
    content: "\\e90b";
  }
  &.icon-eye-outline:before {
    content: "\\e90c";
  }
  &.icon-eye-off-outline:before {
    content: "\\e90d";
  }
`