//
//  DIALTONE
//  UTILITIES: ICONS
//
//  These are icon component classes for Dialpad's design system Dialtone.
//  For further documentation of these and other classes,
//  visit https://dialtone.dialpad.com/components/icon.html
//
//  TABLE OF CONTENTS
//  • SIZE
//
//  ============================================================================
//  $   SIZE
//  ----------------------------------------------------------------------------
.d-icon {
  --icon-size-100: var(--dt-icon-size-100);
  --icon-size-200: var(--dt-icon-size-200);
  --icon-size-300: var(--dt-icon-size-300);
  --icon-size-400: var(--dt-icon-size-400);
  --icon-size-500: var(--dt-icon-size-500);
  --icon-size-600: var(--dt-icon-size-600);
  --icon-size-700: var(--dt-icon-size-700);
  --icon-size-800: var(--dt-icon-size-800);
  --icon-size: var(--icon-size-500);

  flex: none;
  width: var(--icon-size);
  height: var(--icon-size);
  fill: currentColor;

  &--size-800 {
    --icon-size: var(--icon-size-800);
  }

  &--size-700 {
    --icon-size: var(--icon-size-700);
  }

  &--size-600 {
    --icon-size: var(--icon-size-600);
  }

  &--size-500 {
    --icon-size: var(--icon-size-500);
  }

  &--size-400 {
    --icon-size: var(--icon-size-400);
  }

  &--size-300 {
    --icon-size: var(--icon-size-300);
  }

  &--size-200 {
    --icon-size: var(--icon-size-200);
  }

  &--size-100 {
    --icon-size: var(--icon-size-100);
  }

  &__wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}