/*
  @file Utility classes to drop into templates.
*/

.slimline-icon svg {
  display: block;
  width: 1em;
  height: auto;

  & path {
    fill: var(--icon-color, currentColor);
  }
}

.slimline-icon.icon-brand path {
  fill: initial;
}

.slimline-icon {
  transition: none !important;
  * {
    transition: none !important;
  }
}

.slimline-icon--large svg {
  width: var(--anrt-spacing-100);
  font-size: var(--anrt-spacing-100);
}

.slimline-icon--larger svg {
  width: var(--anrt-spacing-125);
  font-size: var(--anrt-spacing-125);
}

.slimline-icon--largest svg {
  width: var(--anrt-spacing-150);
  font-size: var(--anrt-spacing-150);
}

.slimline-icon--small svg {
  width: var(--anrt-spacing-075);
  font-size: var(--anrt-spacing-075);
}

.slimline-icon--smaller svg {
  width: var(--anrt-spacing-066);
  font-size: var(--anrt-spacing-066);
}

.slimline-icon--smallest svg {
  width: var(--anrt-spacing-050);
  font-size: var(--anrt-spacing-050);
}