.icon {
  &-fill {
    &--black {
      fill: var(--color-black);
    }
    &--default {
      fill: currentColor;
    }
    &--disabled {
      fill: var(--color-silver-dark);
    }
    &--high {
      fill: var(--color-high);
    }
    &--neutral {
      fill: var(--color-neutral);
    }
    &--primary {
      fill: var(--color-primary);
    }
    &--secondary {
      fill: var(--color-secondary);
    }
    &--success {
      fill: var(--color-success);
    }
    &--silver {
      fill: var(--color-silver);
    }
    &--granite-light {
      fill: var(--color-granite-light);
    }
    &--granite {
      fill: var(--color-granite);
    }
    &--silver-light {
      fill: var(--color-silver-light);
    }
    &--silver-dark {
      fill: var(--color-silver-dark);
    }
    &--warning {
      fill: var(--color-warning);
    }
    &--white {
      fill: var(--color-white);
    }
  }
  &-stroke {
    fill: transparent;
    &--black {
      stroke: var(--color-black);
    }
    &--default {
      stroke: currentColor;
    }
    &--disabled {
      stroke: var(--color-silver-dark);
    }
    &--high {
      stroke: var(--color-high);
    }
    &--neutral {
      stroke: var(--color-neutral);
    }
    &--primary {
      stroke: var(--color-primary);
    }
    &--secondary {
      stroke: var(--color-secondary);
    }
    &--success {
      stroke: var(--color-success);
    }
    &--silver {
      stroke: var(--color-silver);
    }
    &--granite-light {
      stroke: var(--color-granite-light);
    }
    &--granite {
      stroke: var(--color-granite);
    }
    &--silver-light {
      stroke: var(--color-silver-light);
    }
    &--silver-dark {
      stroke: var(--color-silver-dark);
    }
    &--warning {
      stroke: var(--color-warning);
    }
    &--white {
      stroke: var(--color-white);
    }
  }
}