@use 'sass:math';

@import '_variables';

$fa-font-path: '/static/font/fontawesome/webfonts';

/* from font awesome */
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  font-display: $fa-font-display;
  src: url('#{$fa-font-path}/fa-regular-400.eot');
  src: url('#{$fa-font-path}/fa-regular-400.eot?#iefix')
      format('embedded-opentype'),
    url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
    url('#{$fa-font-path}/fa-regular-400.woff') format('woff'),
    url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype'),
    url('#{$fa-font-path}/fa-regular-400.svg#fontawesome') format('svg');
}

.far,
.fab {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400;
}

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  font-display: $fa-font-display;
  src: url('#{$fa-font-path}/fa-solid-900.eot');
  src: url('#{$fa-font-path}/fa-solid-900.eot?#iefix')
      format('embedded-opentype'),
    url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
    url('#{$fa-font-path}/fa-solid-900.woff') format('woff'),
    url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype'),
    url('#{$fa-font-path}/fa-solid-900.svg#fontawesome') format('svg');
}

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  font-display: $fa-font-display;
  src: url('#{$fa-font-path}/fa-brands-400.eot');
  src: url('#{$fa-font-path}/fa-brands-400.eot?#iefix')
      format('embedded-opentype'),
    url('#{$fa-font-path}/fa-brands-400.woff2') format('woff2'),
    url('#{$fa-font-path}/fa-brands-400.woff') format('woff'),
    url('#{$fa-font-path}/fa-brands-400.ttf') format('truetype'),
    url('#{$fa-font-path}/fa-brands-400.svg#fontawesome') format('svg');
}

.fa,
.fas {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}

// List Icons
// -------------------------

.#{$fa-css-prefix}-ul {
  list-style-type: none;
  margin-left: $fa-li-width * math.div(5, 4);
  padding-left: 0;

  > li {
    position: relative;
  }
}

.#{$fa-css-prefix}-li {
  left: -$fa-li-width;
  position: absolute;
  text-align: center;
  width: $fa-li-width;
  line-height: inherit;
}

// Icon Sizes
// -------------------------

// makes the font 33% larger relative to the icon container
.#{$fa-css-prefix}-lg {
  font-size: math.div(4em, 3);
  line-height: math.div(3em, 4);
  vertical-align: -0.0667em;
}

.#{$fa-css-prefix}-xs {
  font-size: 0.75em;
}

.#{$fa-css-prefix}-sm {
  font-size: 0.875em;
}

.#{$fa-css-prefix}-2_3x {
  font-size: 2.3em;
}

@for $i from 1 through 10 {
  .#{$fa-css-prefix}-#{$i}x {
    font-size: $i * 1em;
  }
}

// Base Class Definition
// -------------------------

.#{$fa-css-prefix},
.fas,
.far,
.fal,
.fad,
.fab {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
}

/* build icon list */
$icons: (
  infinity: $fa-var-infinity,
  search: $fa-var-search,
  book: $fa-var-book,
  project-diagram: $fa-var-project-diagram,
  heart: $fa-var-heart,
  address-card: $fa-var-address-card,
  server: $fa-var-server,
  database: $fa-var-database,
  ship: $fa-var-ship,
  code: $fa-var-code,
  sitemap: $fa-var-sitemap,
  chart-bar: $fa-var-chart-bar,
  tasks: $fa-var-tasks,
  sliders-h: $fa-var-sliders-h,
  lock: $fa-var-lock,
  compass: $fa-var-compass,
  user: $fa-var-user,
  users: $fa-var-users,
  share: $fa-var-share,
  discord: $fa-var-discord,
  github: $fa-var-github,
  envelope: $fa-var-envelope,
  download: $fa-var-download,
  sync-alt: $fa-var-sync-alt,
  life-ring: $fa-var-life-ring,
  pencil-alt: $fa-var-pencil-alt,
  arrow-circle-right: $fa-var-arrow-circle-right,
  globe: $fa-var-globe,
);

@each $key, $value in $icons {
  .#{$fa-css-prefix}-#{$key}:before {
    content: fa-content($value);
  }
}
