@import '../shared-styles/index';

$icon-outline-size-s: nx-spacer(3m);
$icon-outline-size-m: nx-spacer(3xl);
$icon-outline-size-l: 120px;
$icon-outline-size-xl: 160px;

:host {
  speak: none;
  text-transform: none;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: normal;
  text-align: center;
  width: 1em;
  height: 1em;

  ::ng-deep svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
    flex: 0 0 auto;
  }

  &:before {
    font-size: inherit;
    width: 1em;
    height: 1em;
  }

  @media screen and (forced-colors: active) {
    color: inherit !important;
  }
}

// Icon Sizes
// -------------------------
:host(.nx-icon--auto) {
  font-size: inherit;
}

// Since the font size basically controls the dimensions of the icon
// we use the nx-spacer function here instead of font-sizes.
// Font sizes are defined for text so sizes m, l and xl don't exist.
:host(.nx-icon--s) {
  font-size: nx-spacer(m);
}

:host(.nx-icon--m) {
  font-size: nx-spacer(4m);
}

:host(.nx-icon--l) {
  font-size: nx-spacer(2xl);
}

:host(.nx-icon--xl) {
  font-size: nx-spacer(5xl);
}

// Icon Variants
// -------------------------
:host(.nx-icon--outline) {
  border-radius: 50%;
  border: solid;
  width: 2em;
  height: 2em;
  border-width: 1px;

  &.nx-icon--s {
    border-width: nx-border-size(xs);
    width: $icon-outline-size-s;
    height: $icon-outline-size-s;
  }
  &.nx-icon--m {
    border-width: nx-border-size(m);
    width: $icon-outline-size-m;
    height: $icon-outline-size-m;
  }
  &.nx-icon--l {
    border-width: nx-border-size(l);
    width: $icon-outline-size-l;
    height: $icon-outline-size-l;
  }
  &.nx-icon--xl {
    border-width: nx-border-size(xl);
    width: $icon-outline-size-xl;
    height: $icon-outline-size-xl;
  }
}

:host(.nx-icon--fill) {
  border-radius: 50%;
  border-color: transparent;
  width: 2em;
  height: 2em;
  background: v(icon-filled-background-color);
  color: v(icon-filled-color);

  &.nx-icon--s {
    width: $icon-outline-size-s;
    height: $icon-outline-size-s;
  }
  &.nx-icon--m {
    width: $icon-outline-size-m;
    height: $icon-outline-size-m;
  }
  &.nx-icon--l {
    width: $icon-outline-size-l;
    height: $icon-outline-size-l;
  }
  &.nx-icon--xl {
    width: $icon-outline-size-xl;
    height: $icon-outline-size-xl;
  }
}
