@use "mixins";
@use "variables" as fa-variables;

// base icon class definition
// -------------------------

.#{fa-variables.$fa-css-prefix} {
  font-family: var(
    --#{fa-variables.$fa-css-prefix}-style-family,
    "#{fa-variables.$fa-style-family}"
  );
  font-weight: var(
    --#{fa-variables.$fa-css-prefix}-style,
    #{fa-variables.$fa-style}
  );
}

.fas,
.far,
.fab,
.#{fa-variables.$fa-css-prefix}-solid,
.#{fa-variables.$fa-css-prefix}-regular,
.#{fa-variables.$fa-css-prefix}-brands,
.#{fa-variables.$fa-css-prefix} {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: var(
    --#{fa-variables.$fa-css-prefix}-display,
    #{fa-variables.$fa-display}
  );
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
}

.fas::before,
.far::before,
.fab::before,
.#{fa-variables.$fa-css-prefix}-solid::before,
.#{fa-variables.$fa-css-prefix}-regular::before,
.#{fa-variables.$fa-css-prefix}-brands::before,
.#{fa-variables.$fa-css-prefix}::before {
  content: var(#{fa-variables.$fa-icon-property});
}

.#{fa-variables.$fa-css-prefix}-classic,
.fas,
.#{fa-variables.$fa-css-prefix}-solid,
.far,
.#{fa-variables.$fa-css-prefix}-regular {
  font-family: "Font Awesome 6 Free";
}
.#{fa-variables.$fa-css-prefix}-brands,
.fab {
  font-family: "Font Awesome 6 Brands";
}

%fa-icon {
  @include mixins.fa-icon;
}