.icon {
  width: 24px;
  height: 24px;
  outline: none;
  user-select: none;

  img, svg {
    width: 100%;
    height: 100%;
    outline: none;
  }

  &.small {
    width: 16px;
    height: 16px;
  }

  &.medium {
    width: 24px;
    height: 24px;
  }

  &.large {
    width: 32px;
    height: 32px;
  }

  &.x-large {
    width: 48px;
    height: 48px;
  }

  @include screen-sm() {
    &.sm-small {
      width: 16px;
      height: 16px;
    }

    &.sm-medium {
      width: 24px;
      height: 24px;
    }

    &.sm-large {
      width: 32px;
      height: 32px;
    }

    &.sm-x-large {
      width: 48px;
      height: 48px;
    }
  }

  @include screen-md() {
    &.md-small {
      width: 16px;
      height: 16px;
    }

    &.md-medium {
      width: 24px;
      height: 24px;
    }

    &.md-large {
      width: 32px;
      height: 32px;
    }

    &.md-x-large {
      width: 48px;
      height: 48px;
    }
  }

  @include screen-lg() {
    &.lg-small {
      width: 16px;
      height: 16px;
    }

    &.lg-medium {
      width: 24px;
      height: 24px;
    }

    &.lg-large {
      width: 32px;
      height: 32px;
    }

    &.lg-x-large {
      width: 48px;
      height: 48px;
    }
  }


  &.fill-white {
    path {
      fill: white;
    }
  }

  &.stroke-white {
    path {
      stroke: white;
    }
  }

  &.fill-red {
    path {
      fill: var(--red);
    }
  }

  &.stroke-red {
    path {
      stroke: var(--red);
    }
  }

  &.fill-green {
    path {
      fill: var(--green);
    }
  }

  &.stroke-green {
    path {
      stroke: var(--green);
    }
  }

  &.fill-blue {
    path {
      fill: var(--blue);
    }
  }

  &.stroke-blue {
    path {
      stroke: var(--blue);
    }
  }

  &.fill-yellow {
    path {
      fill: var(--yellow);
    }
  }

  &.stroke-yellow {
    path {
      stroke: var(--yellow);
    }
  }

  &.fill-orange {
    path {
      fill: var(--orange);
    }
  }

  &.stroke-orange {
    path {
      stroke: var(--orange);
    }
  }
}
