.icon {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  &.size {
    &-xxxs {
      width: 8px;
      height: 8px;
    }

    &-xxs {
      width: 10px;
      height: 10px;
    }

    &-xs {
      width: 16px;
      height: 16px;
    }

    &-s {
      width: 18px;
      height: 18px;
    }

    &-m {
      width: 24px;
      height: 24px;
    }
    &-l {
      width: 24px;
      height: 24px;
    }
    &-xl {
      width: 73px;
      height: 73px;
    }
  }
  &.clickable {
    cursor: pointer;
    //Hit slop
    &:after {
      content: '';
      position: absolute;
      top: -4px;
      bottom: -4px;
      left: -4px;
      right: -4px;
    }
  }
}
